美文网首页让前端飞Web前端之路技术干货
移动端页面完美适配解决方案(现阶段)

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

作者: 安东尼的漫长岁月 | 来源:发表于2019-09-28 23:09 被阅读0次

    最近在写一些移动端的页面,总会遇到一些适配问题,以前呢也不知道为什么,总是习惯用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是解决移动端适配最完美的解决方案。

    相关文章

      网友评论

        本文标题:移动端页面完美适配解决方案(现阶段)

        本文链接:https://www.haomeiwen.com/subject/kjolyctx.html