阅读 383

一次讲清移动端适配解决方案—rem和vw

目前移动端的适配方案一般就是两种,一个是rem方案,一个就是vw的方案,本篇就是一次性讲清楚如何去运用这两种方案来解决问题。
panda-vue-template
手把手搭建vue小商城2.0

1、关于rem

  • rem的原理什么的我就不说了,网上搜文章一搜一大把。
  • 一般是使用手淘的lib-flexible.js,但是这个作为一种过渡方案已经被废弃了,目前已不推荐在你的新项目中使用这个方案来解决手机适配问题。
  • 感兴趣可以看看我老早以前写的这篇-->手机适配问题之rem和lib-flexible,我们主要还是来谈谈如何用vw来解决这个手机适配问题。

2、安装postcss

  • 要实现使用vw来实现移动端的适配,我们先需要安装postcss。一般来说是这样:
$ npm i postcss-loader --save-dev
复制代码
$ npm install postcss-px-to-viewport --save-dev
复制代码
  • 它可以将我们设置px值自动转化为相应的vwvh之类的值。

3、配置

  • 如果你的项目是用最新的vue-cli3.x来构建了,那么我们连postcss-loder都不用安装,它内部就使用了它。
  • 但是一般我一般更加倾向于新建一个postcss.config.js来配置这部分内容,这样可能更加直观点吧。
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 3,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: ['.ignore'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}
复制代码

4、小结

  • 其实使用vw来实现移动端的适配还是比较简单的,主要就是使用postcss-px-to-viewport这个插件。
  • 大概就这么多吧。

参考链接: juejin.cn/post/684490…
github.com/evrone/post…
cli.vuejs.org/zh/guide/cs…

文章分类
前端
文章标签