Vue在H5端适配方案(amfe-flexible和postcss-pxtorem)

376 阅读1分钟

介绍:

  • amfe-flexible库可以自动计算html根节点的字体大小。
  • postcss-pxtorem插件,可以将px单位转换成rem单位。

上面两个插件的搭配使用,将页面上的元素某些属性以相对于根元素的倍数来进行展示,从而适配不同的屏幕大小。

使用方法:

  • 下载插件
 npm i amfe-flexible -S
 
 npm i postcss-pxtorem -D
  • 使用方法:
  1. main.js中引入 amfe-flexible
import 'amfe-flexible'

2.新建postcss.config.js文件,添加如下代码:

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, 
      // 如果是二倍图750px,则rootValue写 75,如果是一倍图375px,则写 37.5
      propList: ['*'],
    }
  }
}

实测有效~