移动端布局总结

Viewport视口：
在了解移动端布局之前，要了解viewport视口。
pc端没有视口，这个是移动端才有的概念。
viewport视口分为两类：1.可视视口：固定大小，与手机设备一样
2、布局视口：可以调节大小，默认980px，压缩叨可视视口的大小。
width是视口的宽度，可以写固定值，但我们在做移动端布局是通常要写一个动态的值，这样可以适配于各种设备。也就是width：device-width；
height是视口的高度（通常不去设置，无意义）
initial-sale=1.0；minimum-sale=1.0；maximum-sale=0；
user-saleable=no
建议viewport设置为：

移动端布局分为两类：
一、流式布局：
与正常书写pc端的方式差不多，但是容器的宽度不要写死，要自适应视口的变化。
流式布局的好处就是在大屏幕下可以展示更多内容。坏处是宽屏下比例会有些不协调。
二、rem布局：
rem=root + em 也就是将根标签html的font-size大小变成rem单位。
原理是页面中容器、元素在设置样式中涉及到尺寸，间距等单位都要求用rem。想办法改变html的font-size值，这样可以适配不同设备进行等比缩放。
好处：不同设备看起来比较协调。
坏处：显示的内容并不会在大屏幕展示更多。
如何将做到font-size值动态化：
1.通过js
要将htmlfont-size值设置为100px，这样方便心算，因为html的font-size最小设置12px，1和10都不能设置所以往下推最小的方便计算的就是100px
在iphone6中视口宽度为375px，用js书写就是document.documentElement.clientwidth(375)/3.75
要实现等比缩放，iphone6 plus的html文字大小肯定要设置大