移动端常见布局方案

1、流式布局

    宽度使用百分比代替固定宽度px，高度大多使用px固定，因此在大屏幕手机下显示效果会变成页面元素宽度被拉长，高度和原来保持一致

    - 优点

    可以很好解决自适应问题

    - 缺点

    实际显示效果不协调；大量使用百分比布局，会出现兼容问题；设计有局限性

 2、固定布局

    设置viewport，布局与PC端一致，假设整个网页的宽度为320px居中，超出部分留白

    - 优点：思路沿用PC端，上手容易

    - 缺点：大屏幕手机及手机横屏的时候，两侧留白较大，且大屏幕手机下显示内容看起来较小，操作按钮也较小，用户体验较差

3、响应式布局

    一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的

    - 优点：一站适配所有终端、减少工作量；缩短开发周期；对搜索引擎表现更友好；每个设备中都能得到较好的设计

    - 缺点：在老版本浏览器中兼容不好；兼容各种设备工作量大，效率低；加载更多的样式和脚本文件；设计比较难于精确定位和控制；是一种折中性质的设计方案，由于多方因素的影响可能达不到最佳效果，在一定程度上改变了网页布局结构，会出现用户混淆情况；维护困难

 4、rem布局

   rem是css3新增单位，相对于根元素的字号大小的单位。如：html标签设置font-size: 100px; 一个div的width:1rem; div的width的宽度为100px

- rem布局的实现

    - 1）设置页面的viewport

    - 2）动态计算并设置html的font-size属性值

    - 3）按照PC端布局方式正常布局，将px单位改为rem单位；如果值较小（1px），不需要转换

- 优点：适用于偏App类型的移动端页面；有利于手机端各种机型的适配；减少代码重复性；有统一的参考值

- 缺点：使用具有局限性，所有的图片都需设置一个准确值，才能保证在不同机型的适配中正常显示；必须通过js来动态控制根元素的大小

 5、vw布局

 使用纯css实现动态改变font-size属性值，不需要引用js文件

 - vw viewport's width  是css3规范中宽度视口单位，将视口宽度平均分成100份

 - vh viewport's height 将视口高度平均分成100份

 - 1vw = 屏幕宽度的1%

 - vmax 相对于视口的宽度或高度中较大的那个，将最大的那个平均分成100单位的vmax

 - vmin 相对于视口的宽度或高度中较小的那个，将最小的那个平均分成100单位的vmin

    - iphone 375 1vw = 3.75    26.6666666个vw是100px

    - iphone 414 1vw = 4.14    24.154个vw是100px

    - 582  1vw = 5.82     50vw = 291px

- 原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px,后期借助插件自动计算得到需要的vw

- 优点：页面元素随着页面宽度变化

- 缺点：兼容性没有rem好

 vw + rem布局

    确定基准值以常见的750px设计稿为例（宽度），根据vw单位和rem单位原理实现

在750px设计搞下，如果使用vw单位换算，可以理解成100vw = 750px，1px = 0.13333333vw；如果使用rem单位换算，预设1rem = 100px; 则100px = 13.333333vw 

    html{

        font-size: 13.333333vw;

    }