移动端自适应方案变迁

假设设计稿是宽为1080px

px -> rem

优点：

• 自适应
• 限制页面大小

缺点：

• 耗费性能，实时监听
• 使用js计算，代码不优雅

方案：

1. 针对设计稿，设置一个font-size，作为rem，这样设计稿中的所有px单位都可转成rem表示

   为了方便换算，设置font-size= 1rem = 10px，这样100px就可以表示为10rem

2. 接下来则是在实际开发代码中保持比例，维持一个换算关系，从而在开发中使用rem单位

   1080px / 10px(1rem) = window.innerWidth(屏幕宽度) / x(待换算得出的不同页面的rem)

   x = window.innerWidth(屏幕宽度) / [1080px / 10px(1rem) ]

px -> vw

优点：

• 自适应
• vw计算由浏览器底层实现，无需js计算

缺点：

• vw无最大最小限制

方案：

1. 直接将1080px与100vw对应，开发中使用vw单位，如设计稿中的10px，则换算成 (100px/1080px)*100vw = 9.26vw

px -> rem -> vw

结合版 flexible.js

优点：

• 自适应
• 限制页面大小
• vw计算由浏览器底层实现

结合上面两种，将第一种的1rem原有的px单位换算成vw单位，开发中仍用rem单位

1080px / 108px(1rem) = 100vw / x(1rem)

x(1rem) = 100vw / 10px = 10vw

通过媒体查询可以限制font-size最大值，从而整个页面的大小

aotu.io/notes/2017/…