移动端布局方案汇总 && 原理解析
阿里 flexible 布局 – 版本 1.x
该布局于 2017 年 8 月 9 日被 2.0 版本取代
实现原理 假设（UI 稿 750px 宽）
设置 viewport 的 scale = 1/window.devicePixelRatio
将屏幕分成 10 份，font-size = 实际屏幕宽度 / 10;
开发时直接填写 (设计稿 DOM 宽度)px
利用 px2rem 插件 转换为 -> 实际 rem
阿里 flexible 布局 – 版本 2.x
flexible 2.x：https://github.com/amfe/lib-f…
实现原理
利用 viewport 的理想视口，删除 1.x 版本的 scale 缩放
其他依旧和 1.x 版本一样
网易布局
个人很喜欢的布局方案
实现原理 假设（UI 稿 750px 宽）
如低版本浏览器:
UI 稿以 font-size = 100px; 作为参照，总宽度 = 7.5rem
设计稿 DOM 对应 px / 100 = 实际 rem（计算起来很方便）
其他屏幕按屏幕宽度百分比 缩放 font-size 的值
若高版本浏览器:
1px/750px ≈ 0.1333333%
按照低版本逻辑：font-size = 0.1333333% * 100 = 13.33333vw
webpack 插件 postcss-px-to-viewport
顾名思义，将 px 转换为 vw、vh、vmin、vmax
{
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: ‘vw’,
selectorBlackList: [‘.ignore’, ‘.hairlines’],
minPixelValue：1,
mediaQuery: false
}
End
文章分享同步于：https://github.com/zhongmeizh…
返回主页