前言
前端开发中，我们一般使用像素px来设置元素的宽高以及字体的大小；例如：width: 32px;；
但是在遇到要求不同屏幕下进行自适应的情况，我们就不能使用px来直接固定元素的大小，以防止出现界面混乱的问题；
这时候，rem就有了作用；
rem是与px相似的一种单位，可以用来设置元素的宽高等；
一、rem
rem是一种相对单位，是相对于根元素（html）的字体大小的单位；
3rem = 3 * html.fontSize;
默认情况下，根元素（html）的字体大小为16px;
1. rem举例
<div class="content">aaaa</div>
.content {
width: 50%;
height: 3rem;
background-color: red;
color: white;
}
结果
这里的3rem通过计算，显示为48px;
2. 也可以通过设置根元素的字体大小，设置rem的基准大小；
<!DOCTYPE html>
<html lang="" style="font-size: 32px;">
...
</html>
结果
3rem通过计算，显示为96px；
二、动态设置rem的基准
- rem的基准，就是根元素的字体大小；
- 我们可以通过设置根元素的字体，来设置rem的基准
created() {
let docEle = document.documentElement;
docEle.style.fontSize = '20px'
}
结果
三、全局自适应
在实际开发中，UI给出的设计图都是用px来做单位的，如果我们需要做自适应，就需要把每个标注都做一遍计算，转化成rem，这又是一笔工作量；
那有没有什么快捷的办法呢？
当然有，那就是插件：postcss-px2rem、px2rem-loader
使用这两个插件，我们在代码中可以使用
px，它会自动帮我们转化成rem；
-
安装插件
npm install postcss-px2rem px2rem-loader --save -
创建适配文件：
rem.js
// 基准大小
const baseSize = 20;
// 设置 rem 函数
function setRem () {
// 设置实际基准大小（可根据屏幕宽度进行动态计算）
document.documentElement.style.fontSize = baseSize + 'px'
}
// 初始化
setRem()
//监听窗口变化 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
- 在
main.js中引用rem.js
import './rem.js';
- 配置
vue.config.js
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 这里的16是默认的基准，因为根元素字体的默认大小就是16
remUnit: 16
})
// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
- 测试代码
<div class="content">aaaa</div>
.content {
width: 50%;
height: 60px;
background-color: red;
text-align: center;
color: white;
}
结果展示
- content中的height被计算为
3.75rem；根据60(代码中的60px)除以16 (vue.config.js中的基准大小)计算得出；- 根元素的font-size
20px，是rem.js文件中动态设置的基准大小；- content元素的实际大小为
75px，是3.75rem(第一步)乘以20(第二步)计算得出；
网友评论