自适应布局：rem

2022-10-17 本文已影响0人 fanren

前言

前端开发中，我们一般使用像素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-size20px，是rem.js文件中动态设置的基准大小；

content元素的实际大小为75px，是3.75rem(第一步)乘以20(第二步)计算得出；