vue3.0中使用postcss-pxtorem的具体方法
更新时间：2019年11月20日 10:16:41 作者：saintkl
这篇文章主要介绍了vue3.0中使用postcss-pxtorem的具体方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。
前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。
1.安装依赖
npm install postcss-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理解起来有点懵，后来发现了一个好理解的方法，下面来分享一下。
现在我们作一个实验，你可以新建一个网页，并写入如下代码：
<div class="test"> <p class="hello">Hello</p> </div>
然后给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 函数
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
import './libs/rem.js';
最后刷新页面看下，就会发现原本用px的单位已经自动换算成了rem;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了electron踩坑之dialog中的callback解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
element-plus dialog v-loading不生效问题及解决
这篇文章主要介绍了element-plus dialog v-loading不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
生命周期分为四个对子，根据不同的情况使用不同的函数，这篇文章主要为大家介绍了这些函数的使用与区别，感兴趣的小伙伴可以了解一下2023-08-08
集成vue-cli脚手架里面的二维码插件貌似很多，一般都会满足大部分需求，这次就讲一下插件vue-qriously生成二维码效果，感兴趣的朋友一起看看吧2022-04-04
自定义指令，其实就是在vue提供的钩子中写代码，这篇文章将从源码的角度，带大家深入了解一下Vue2种自定义指令的实现与使用，需要的可以参考一下2023-05-05
这篇文章主要介绍了Vue使用正则校验文本框为正整数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要给大家介绍了关于Vue中$refs的探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了Vue+element 商品列表、新增、编辑、删除业务实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue项目中数据的深度监听或对象属性的监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在Vue3中,onUnmounted是一个生命周期钩子,它会在组件实例被卸载（unmounted）和销毁之前被调用,本文给大家介绍vue3中onUnmounted使用详解,感兴趣的朋友跟随小编一起看看吧2024-03-03
最新评论