移动端自适应布局整理

一、rem+flexible.js

布局流程

1、引入flexible.js

2、根据设计稿确认1rem的尺寸（比如375设计稿下 1rem = 37.5px）

3、将设计稿中的px单位转为rem单位（60px 60 / 37.5 rem）

Tips：简单来说，就是 （设计稿中的尺寸（px）/ 设计稿宽的1/10 ） rem

二、rem网易做法（默认1rem=100px）

原理参考https://www.cnblogs.com/lyzg/p/4877277.html进行了解，具体分析见移动web第五天总结。

Tips：用法很简单，设置好js相关代码之后，只需要将设计稿中的尺寸直接除以100即可。

三、vw & wh

布局流程

1、根据设计稿计算出1vw的尺寸（比如375设计稿下 1vw = 3.75px）

2、将设计稿中的px单位转为vw单位（60px 60 / 3.75 vw）

Tips：简单来说，就是 （设计稿中的尺寸（px）/ 设计稿宽的1/100 ） vw

注意

全面屏：高尺寸要大一些，要避免vw和vh混合使用