1.5.0 H5页面适配移动终端

1.5.1 在移动浏览器使用viewport元标签控制布局

viewport最早是iphone解决移动浏览器布局的相关问题（PS：在处理屏幕方向改变时稍有差异，）的解决方案之一。后来随着移动浏览器网页的发展被广泛使用。

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />

• maximum-scale、minimum-scale、user-scalable 规定用怎样的方式去缩放页面
• device-width 这一特殊值来指代比例为100%时屏幕宽度的CSS像素数值
• initial-scale属性控制页面最初加载时的缩放等级

上述代码含义主要设置屏幕与页面为比例为1:1、关闭默认的页面缩放、默认的宽度等于设备的宽度以及关闭一些默认的样式（PS:例如telephone=no手机号码不被显示为拨号链接）具体更多设定可参考官方文档

效果：

使用后：

1.5.2 rem与em

• em 单位是根据父元素的font-size大小来取值的（PS：父元素的font-size是20px ，那么子元素 1em=20px）
• rem 是根据根标签的font-size取值，浏览器默认的根元素的font-size为16px

em单位如果层级非常的复杂，容易造成单位错误，字体过大挤压布局，一般来说rem更值得青睐。

那么问题来了，如果需要设置标签的字体大小为17px，那么对应的rem值为1.0625rem，计算起来非常繁琐，后来开发人员有一个解决方案：设置根元素的font-size为62.5% 即1rem=10px，问题就解决了。

1.5.3 扩展

• 阮一峰先生的博客使用的是rem加em加百分比布局
  

• 值得一提的是：此方案经过淘宝移动页面扩展完整的flexible.js多设备的测试，可靠度方面是经得住考验的。