常见的移动端布局

1. 宽度自适应布局

宽度采取百分比，高度固定，弊端：大屏下，元素宽度拉伸，易变形

2. rem布局

1. 设置页面的viewport 

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2. js动态计算并设置html的font-size值
3. 按照pc布局方式正常布局，把px换成rem

3. vw+rem布局

css3规范中的视口单位，相对于视口的宽度，视口被均匀分为100个单位的vw，在750px的设计稿下，100vw=750px,1px=0.13333...vw,如果用rem布局，1rem=100px，1px=0.13333...vw,100px=13.3333...vw,由此实现rem与vw转换 ， 设置html{ font-size:13.33333vw },如果设计稿是100px,css写1rem