自适应布局:rem

前言

前端开发中,我们一般使用像素px来设置元素的宽高以及字体的大小;例如:width: 32px;
但是在遇到要求不同屏幕下进行自适应的情况,我们就不能使用px来直接固定元素的大小,以防止出现界面混乱的问题;
这时候,rem就有了作用;
rem是与px相似的一种单位,可以用来设置元素的宽高等;

一、rem

rem是一种相对单位,是相对于根元素(html)字体大小的单位;

3rem = 3 * html.fontSize;

默认情况下,根元素(html)的字体大小为16px;

1. rem举例

aaaa
.content { width: 50%; height: 3rem; background-color: red; color: white; }
结果

这里的3rem通过计算,显示为48px;

2. 也可以通过设置根元素的字体大小,设置rem的基准大小;



  ...

结果

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
        ]
      }
    }
  }
}
  • 测试代码
aaaa
.content { width: 50%; height: 60px; background-color: red; text-align: center; color: white; }
结果展示
  1. content中的height被计算为3.75rem;根据60(代码中的60px)除以16 (vue.config.js中的基准大小)计算得出;
  2. 根元素的font-size20px,是rem.js文件中动态设置的基准大小;
  3. content元素的实际大小为75px,是3.75rem(第一步)乘以20(第二步)计算得出;

你可能感兴趣的:(自适应布局:rem)