postcss rem配置

安装 postcss-pxtorem

npm install postcss-pxtorem -D

配置

cli2的配置


image.png

cli3的配置

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            plugins: [
              autoprefixer(),
              pxtorem({
                rootValue: 37.5,
                propList: ['*']
              })
            ]
          }
        }
      }
}

pxtorem 是将代码中的px转换为rem,比如代码里写了font-size:12px,设置了rootValue为37.5,则打包后为
font-size:12/37.5 rem

配置rem

可以使用淘宝的# lib-flexible
也可以自己写一个rem.js

推荐阅读更多精彩内容

  • 1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...
    程序汪丶阅读 1,323评论 0 52
  • 使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备 或者直接加载阿里CDN的文件: ...
    半世韶华忆阑珊阅读 274评论 0 0
  • 1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...
    _双眸阅读 9,746评论 10 29
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,919评论 1 84
  • 现在回过头来看,感觉自己以前写复杂了,其实道理很简单; 就是利用vw,rem随屏幕,或者跟字体正比变化的特性; 1...
    会会会会阅读 12,287评论 13 34