1.0.3 • Published 4 years ago
postcss-px-to-remjs v1.0.3
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打开,防止页面中个元素尺寸过大
}