移动端页面

1、viewport声明的意义

在head中添加以下标签，让手机浏览器以device-width的宽度为初始包含块渲染页面，device-width根据设备的不同而不同，也可以填写一个纯数值

   //目前部分手机（安卓 4.4 以下）不支持纯数值

安卓 4.4 以上

• 1、严格按比例还原视觉稿布局

width=视觉稿宽度，页面可以使用px单位开发

• 2、页面内容与屏幕大小呈正相关

width=device-width，使用px单位 + 流式布局开发

安卓 4.4 以下（不支持width=数值）

• 页面内容与屏幕大小呈正相关

width=device-width，使用rem开发

html{
    font-size:calc(100vw / 视觉稿宽度);
}

2、如何把像素宽度为750px设计稿还原到网页？

750px宽度的视觉稿

html{
    font-size: calc(100vw / 视觉稿宽度 * 100);
}

1、视觉稿测量的数值可以直接使用rem转换
2、乘以100的原因：避免字号太小被浏览器重置为最小字号，所以实际测量的数值需除以100，比如视觉稿测量100px = 1rem

安卓4.0以下不支持calc 或 vw ，建议设计师给与1000宽度的设计稿，或者换算成1000后进行计算。

3、viewport标签的常见属性

initial-scale=1.0    //查看视口 渲染视口是相同的
user-scalable=no    //禁止用户进行缩放，不建议使用
maximum-scale=1    //最大缩放倍数