微客导航 » 文章资讯 » vue3.0中使用postcss-pxtorem的具体方法

vue3.0中使用postcss-pxtorem的具体方法

2023-08-08 13:59:06 228

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。

1.安装依赖

npminstallpostcss-pxtorem-D

2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）

module.exports={
plugins:{
'autoprefixer':{
browsers:['Android>=4.0','iOS>=7']
},
'postcss-pxtorem':{
rootValue:16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成20rem
propList:['*']
}
}
}

操作到这里移动端自动适配了吗，当然不能，目前只是将px单位转换成rem,移动端适配还差最后一步,初接触rem理解起来有点懵，后来发现了一个好理解的方法，下面来分享一下。

现在我们作一个实验，你可以新建一个网页，并写入如下代码：


Hello

然后给html一个基本的样式:

.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就好。

.test{
width:20rem;
height:10rem;
background-color:bisque;
text-align:center；
}
.hello{
color:red;
font-size:1rem;
}

明白了REM的原理后，我们就可以使用这个特点来进行适应布局了，这也是现在比较主流的移动端web适配方案。src目录下，新建libs/rem.js输入如下代码

//设置rem函数
functionsetRem(){

//320默认大小16px;320px=20rem;每个元素px基础上/16
lethtmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
//得到html的Dom元素
lethtmlDom=document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize=htmlWidth/20+'px';
}
//初始化
setRem();
//改变窗口大小时重新设置rem
window.onresize=function(){
setRem()
}

在main.js中引入rem.js

import'./libs/rem.js';

最后刷新页面看下，就会发现原本用px的单位已经自动换算成了rem;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue3.0中使用postcss-pxtorem的具体方法

热门推荐

随机推荐