pxtorem网页自适应方案

-

之前为了些自适应网页，会在项目里写rem。如果设置的rem不恰当，每次还要经过一番计算来得出像素转换成rem的值；有些麻烦；

pxtorem解决了这样的问题

我们可以根据设计图大小设置好根节点的字体大小，也就是1rem=多少像素；

pxtorem帮助我们自动将px转换成rem；

在代码中就可以直接写px，不用写rem了；

github地址：https://github.com/cuth/postcss-pxtorem

安装：

npm install postcss-pxtorem -D

根据设计图大小设置根节点文字大小：

rem.js

// 设置 rem 函数
function setRem () {
  // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  //得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0];
  //设置根元素字体大小
  htmlDom.style.fontSize= htmlWidth/(1920/16) + 'px';
}
setRem();
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', function () {
  setRem()
})

在项目根目录写配置文件postcss.config.js

module.exports = {
  plugins: {
    // 兼容浏览器，添加前缀
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue: 16, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      unitPrecision: 5, //保留rem小数点多少位
      //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      // replace: true, 
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      minPixelValue: 12, //px小于12的不会被转换
    },
  },
};

具体参数参考github文档

-