移动端 适配

[ly2011]

转自: 移动端 适配.md

vw + rem 方案

demo: https://github.com/HuJiaoHJ/h5-layout

• 1、设置 html font-size 为 10vw

html {
    font-size: 10vw;
}

• 2、以750px(iPhone6)设计稿为例，在css中，直接使用UI图上的长度值，单位设置为 px

.head {
  width: 750px;
}

• 3、引入 postcss-pxtorem 插件，配置如下： https://github.com/HuJiaoHJ/h5-layout/blob/master/.postcssrc.js

require('postcss-pxtorem')({
    rootValue: 75,
    unitPrecision: 5,
    propList: ['*'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
})

以上，就可以使用了 vw + rem 方案实现了移动端适配