常见的移动端布局方案有哪些？原理如何？

Posted 2020-12-11 qiankun215

1）固定布局：设置viewport，布局与pc端一样，设假设整个网页的宽度为320px居中即可，超出部分留白。

优点：思路沿用PC端，上手简单。

缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差

2）流式布局：重点是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样。

优点：可以很好解决自适应需求

缺点：通过大量的百分比布局，会出现兼容的问题，且更适用于对横向拉伸的设计元素，设计存在局限性。

3）响应式布局：一个网站能够兼容多个终端，实现不同屏幕分辨率的终端上网页的不同布局。使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。

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

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

4）rem布局：rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。本质是等比缩放。

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

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

5）vw布局：确定基准值以常见的750px宽度的设计稿为例，则根据vw单位的原理100vw= 750px，即1vw= 7.5px，可以根据设计图中的px直接转换成对应的vw值进行布局，当然也可以直接写px，借助插件自动计算成需要的vw。

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

缺点：兼容性没有rem 好