postcss-px-to-remjs

一个用来通过rem适配移动端的插件，包括 postcss 的插件 postcss-px-to-rem 和 HtmlWepbackPlugin 的钩子插件 HtmlWebpackPxToRemPlugin 两部分组成，本插件主要用在webpack下

简介

该插件会通过两个部分来完成适配工作，postcss插件部分主要是用来替换css文件中的px为rem，HtmlWebpackPlugin 钩子插件主要是用来向html的头部注入简版的rem.js代码用以动态改变根字体大小，postcss-px-to-viewport功能完成

输入（设计稿宽度为1080px）

.class{
  width:1080px;
  padding:10px;
  margin:2px;
  font-size:14px;
  border-width:0;
}

输出

.class{
  width:10.8rem;
  padding:0.1rem;
  margin:0.02rem;
  font-size:0.14rem;
  border-width:0;
}

安装

npm i postcss-px-to-remjs --save-dev

yarn add postcss-px-to-remjs --dev

使用

配置postcss的plugins

module.exports = {
  plugins:{
    //...
    'postcss-px-to-remjs': {
      //options
    }
  }
}

默认参数

let defaults = {
  propList: ['*'],//能够转化为rem的属性列表，默认是所有
  selectorBlackList: [],//需要忽略的CSS选择器
  replace: true,//是否直接更换属性值，而不添加备用属性
  exclude: [],//忽略某些文件夹下的文件或特定文件
};

本插件仅支持以上属性，可参考 postcss-px-to-viewport 插件中对应属性介绍

配置Webpack的plugins

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPxToRemPlugin = require('postcss-px-to-remjs/plugins/html-webpack-px-to-rem-plugin');

module.exports = {
  //...
  plugins:[
     new HtmlWebpackPlugin({
       template: "./index.html",
       filename: "./dist/index.html",
       chunks: ["index"]
     }),
    new HtmlWebpackPxToRemPlugin({
      //options
    })
  ]
}

默认参数

{
  designWidth: 1080,//设计稿宽度
  maxPageWidth:1080 //允许页面显示的最大宽度，此宽度是用来限制页面无限制放大，比如将手机页面在pad打开，防止页面中个元素尺寸过大
}