移动端页面完美适配解决方案(现阶段)

603 阅读1分钟

最近在写一些移动端的页面,总会遇到一些适配问题,以前呢也不知道为什么,总是习惯用rem来做单位,可是总有问题,写起来相当难受,于是我坐不住了,一定要去看看有没有更好的方法。 然后就有了已下心得。 先吐槽一句,rem不知道是谁带起来的,坑了好多人。 想必做前端的肯定都知道vw,vh这样的相对单位吧。它是相对于屏幕的宽度来的,具体可以看看这篇文章 接下来就是如何写项目配置,首先安装postcss-px-to-viewport这个插件,然后在项目根目录创建(如果有就不用).postcssrc.js文件 具体配置如下:

module.exports = {
  "plugins": {
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      // viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: [
        '.ignore',
        '.weui-dialog',
        '.swiper',
        '.weui-toast',
        '.weui-loading',
        '.weui-icon_toast'
      ], // 这是需要忽略转换的css名称,为了搭配一些第三方ui库使用
      minPixelValue: 1,
      mediaQuery: false
    }
  }
}

viewportWidth: 750这个配置指的是ui给你的移动端页面是750px宽,这样对应的话,你的css(less)文件里写单位还是写原来的px就行,比如蓝湖上某张图片的宽高是75px*75px,那么你在css里也直接写就ok。

.img{
  width: 75px;
  height: 75px;
}
// 最后会编译为
.img{
  width: 10vw;
  height: 10vw;
}

书写上和与ui的交流上完全不用人为手动转化,是不是有种恍然大悟的感觉,写过小程序就能明白,小程序的rpx单位其实也一样的原理。 最后想说,目前来看,我觉得flex布局+vw是解决移动端适配最完美的解决方案。