<强> postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。
前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算快速眼动值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。
1。安装依赖
npm安装postcss-pxtorem - d
2。设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件)
模块。出口={
插件:{
“autoprefixer”: {
浏览器:[Android祝辞=4.0,iOS祝辞=7 ')
},
“postcss-pxtorem”: {//rootValue: 16日结果为:设计稿元素尺寸/16,比如元素宽320 px,最终页面会换算成20快速眼动
propList (“*”):
}
}
}
之前
操作到这里移动端自动适配了吗,当然不能,目前只是将px单位转换成rem,移动端适配还差最后一步,初接触rem理解起来有点懵,后来发现了一个好理解的方法,下面来分享一下。
现在我们作一个实验,你可以新建一个网页,并写入如下代码:
& lt; div类=安馐浴北?
& lt; p class="你好"祝辞Hello
& lt;/div>
之前
html 然后给一个基本的样式:
test {
宽度:320 px;
身高:160 px;
background - color:浓汤;
text-align:中心;
}
.hello {
颜色:红色;
}
之前
上边我们使用了还是传统的使用px作为单位,我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的,我们再查看一下字体,发现大小是16 px。
我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16 px,那么换成rem单位,直接除以16就好。
test {
宽度:20眼动;
高度:10眼动;
background - color:浓汤;
text-align:中心;
}
.hello {
颜色:红色;
字体大小:1快速眼动;
}
之前
明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端网络适配方案.src目录下,新建libs/快速眼动。js输入如下代码
//设置rem函数
函数setRem () {//320默认大小16 px;320 px=20 rem;每个元素px基础上/16
让htmlWidth=document.documentElement。clientWidth | | document.body.clientWidth;//得到html Dom的元素
让htmlDom=document.getElementsByTagName (html) [0];//设置根元素字体大小
htmlDom.style。字形大?htmlWidth/20 +“px”;
}//初始化
setRem ();//改变窗口大小时重新设置快速眼动
窗口。onresize=function () {
setRem ()
}
之前
在main.js中引入rem.js
进口的。/libs/rem.js”;
最后刷新页面看下,就会发现原本用px的单位已经自动换算成了rem;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
