postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。
前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。
1.安装依赖
|
1 2 |
npm install postcss-pxtorem -D |
2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem propList: ['*'] } } } |
操作到这里移动端自动适配了吗，当然不能，目前只是将px单位转换成rem,移动端适配还差最后一步,初接触rem理解起来有点懵，后来发现了一个好理解的方法，下面来分享一下。
现在我们作一个实验，你可以新建一个网页，并写入如下代码：
|
1 2 3 4 |
<div class="test"> <p class="hello">Hello</p> </div> |
然后给html一个基本的样式:
|
1 2 3 4 5 6 7 8 9 10 |
.test{ width:320px; height:160px; background-color: bisque; text-align: center； } .hello{ color:red; } |
上边我们使用了还是传统的使用px作为单位，我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的，我们再查看一下字体，发现大小是16px。
我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px，那么换成rem单位，直接除以16就好。
|
1 2 3 4 5 6 7 8 9 10 11 |
.test{ width:20rem; height:10rem; background-color: bisque; text-align: center； } .hello{ color:red; font-size:1rem; } |
明白了REM的原理后，我们就可以使用这个特点来进行适应布局了，这也是现在比较主流的移动端web适配方案。src目录下，新建 libs/rem.js 输入如下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 设置 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/20 + 'px'; } // 初始化 setRem(); // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() } |
在main.js中引入rem.js
|
1 2 |
import './libs/rem.js'; |
最后刷新页面看下，就会发现原本用px的单位已经自动换算成了rem;
未经允许不得转载：一点博客-青梅煮码-共享博客 » vue3.0中使用postcss-pxtorem
评论抢沙发