挪动端规划计划汇总&&道理剖析

阿里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…

返回主页