本文介绍了移动端布局中关于viewport元标签的使用，解释了width、initial-scale等属性的意义，并探讨了CSS3单位rem在移动端布局中的应用，强调了其相对于em单位的优势。同时，讨论了手机屏幕分辨率与逻辑分辨率的概念。文中提到了两种移动端布局方法，一种是通过设置viewport确保代码按逻辑像素点1:1编写，另一种是利用rem进行适配。最后预告了将要总结的第三种方法。
首先先了解html中这一句话的含义：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1，user-scalable=no">
width - viewport-的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
然后在了解一个单位rem
rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的
最低0.47元/天 解锁文章
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
