自适应方案postcss-pxtorem使用步骤
作者：SDNni
这篇文章主要介绍了如何使用postcss-pxtorem插件将px单位转换为rem单位,包括安装插件、创建配置文件和引入脚本的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
1.下载postcss-pxtorem插件
安装指定版本 npm i postcss-pxtorem@5.1.1
2.在根目录添加 .postcssrc.js文件
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 37.5, //换算基数，
propList: ['*'],
unitToConvert: "px", // (String) 要转换的单位，默认是px。
widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是1920.
unitPrecision: 3, // (Number) 允许 REM 单位增长到的十进制数字.
selectorBlackList: [".ignore", ".hairlines"], // (Array) 要忽略并保留为 px 的选择器.
minPixelValue: 1, // (Number) 设置要替换的最小像素值.
mediaQuery: false, // (Boolean) 允许在媒体查询中转换 px.
},
},
};
3.在utils里添加rem.js文件
// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}4.引入main.js
import '@/utils/rem.js'
注意项:
- 标签中直接定义的 width和height进行不了转换, 例如img标签.
- 标签中style属性的width和height是可以被转换的.
总结
到此这篇关于自适应方案postcss-pxtorem使用步骤的文章就介绍到这了,更多相关postcss-pxtorem使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！