admin 管理员组

文章数量: 1184232

响应式开发精短总结

vieport目前还不是w3c的正式标准之一，主要用在移动端配合@media实现自适应移动网页设计

最开始的移动端浏览器在一个比屏幕更宽的虚拟“窗口”中渲染页面，然后通过手指在屏幕的缩放和平移来浏览。
首先引入viewport元标签（<meta name="viewport" content="...">）的是mobile safari苹果移动浏览器，Safari浏览器明确规定，标签的内容必须为“由逗号分隔的列表”。

视口基础

  • width:<px|device-width>

  • initial-scale:<number>

  • maximum-scale:<number>

  • minmum-scale:<number>

  • user-scalable:<true|false>

像素并非像素

在很多移动端的浏览器中根据自身的屏幕像素密度会采取一定的屏幕物理像素跟css像素比的方式来显示网页。

这样导致的问题是：

1、因为移动端当今的屏幕物理像素密度非常高导致正常的页面会成倍放大，带来文字和图片失真的情况。
解决方法是：
2、刚开始就针对移动端设计放大倍数的网页。然后通过css缩小。

视口宽度及屏幕宽度

现在通常的做法是:

  1. 添加

<meta name='viewport' content="width=device-width, initial-scale=1,user-scalable=false">

  1. 使用@media来进行自适应。

本文标签： 响应式开发精短总结

版权声明：本文标题：响应式开发精短总结 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/p/1698029929a283543.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。