百分比布局 & rem布局

100%布局特点：屏幕尺寸越大显示的内容越多;
rem布局特点：不同屏幕尺寸，显示的内容大致一样;

百分比布局

1. 新建html及对应的css

2. 引入meta : vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp"/>

3. 引入设备缩放比代码(后三句)，将id名添加到meta标签

<script type="text/javascript">
// 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
	var scale = 1/window.devicePixelRatio;
	var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
	document.getElementById("vp").content = mstr;
</script>

4. 一般拿到640px的设计稿，在iphone5开发。
   750px的设计稿，在iphone6开发。

5. 做页面，量出来多少写多少。
   body, html { height : 100%; }
   （1）整个盒子高度100%，设置成弹性盒，主轴垂直向下
   （2）main部分高度不确定，所以剩余高度都给main，flex:1;由于main内容很多，所以还要添加overflow-x:hidden;从而overflow-y:auto;（可以省略），这一部分可以垂直滚动。

rem布局

1. 新建html及对应的css

2. 引入meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" id="vp"/>

3. 引入设备缩放比代码(五句)，将id名添加到meta标签

<script type="text/javascript">
    // 把尺寸放大N倍（N是window.devicePixelRatio）
    var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
    //物理像素*设备像素比=真实像素
    document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
    // 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
    var scale = 1/window.devicePixelRatio;
    var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
    document.getElementById("vp").content = mstr;
</script>

4. 一般拿到640px的设计稿，在iphone5开发
   750px的设计稿，在iphone6开发，注意查看根部字体大小。

5. 做页面，量出来多少写多少。把单位直接写成rem。（可以通过插件转换，插件里面px转rem的值写成：你的开发平台的根部字体大小）
   （1）整个盒子高度100%，设置成弹性盒，主轴垂直向下
   （2）main部分高度不确定，所以剩余高度都给main，flex:1;由于main内容很多，所以还要添加overflow-x:hidden;从而overflow-y:auto;（可以省略），这一部分可以垂直滚动。