rem适配[通俗易懂]

大家好，欢迎来到IT知识分享网。

rem: (root em),rem是css中的一种相对长度单位。相对于根元素(即html元素)font-size计算值的倍数,区别于em,em是相对于父标签元素
配置规则：

• 设计稿是1920px ，约定将屏幕分成若干份数，如80份
  1. 计算出的结果最好不要是小数，否则会影响精度
  2. 1rem默认的px大小不要太离谱 （1rem = 1920 /80 = 24px,意味着1rem===24px）
• 那么设备宽度与rem基准值比例为 80 。
  1. 分为多少份 每一份的宽度就是一个rem的宽度
• 进行单位换算时可将 24px作为基准值( 基准值就是当前html字体大小 )即可
  例如：
  一个div宽度为240px 那么这个div换成rem就是 240px = 240 / (1/24) == 10rem,那么这个元素在任何设备下的大小都是10rem，只是不同屏幕下代表的px值不一样
  当屏幕宽度为320时， 320 / 80 = 4 意味着1rem = 4px (10rem = 40px)

问：当一个html页面中一个 div宽度2rem html字体大小为100px 则div实际高度是多少？
答：html字体大小为100px,则基准值为100，即1rem === 100px 所以div宽为200px

// 实现rem适配
(function () { 
   
  // rem参照根元素的字体大小
  var setFont = function () { 
   
    var html = document.documentElement
    var width = html.clientWidth
    if (width < 1024) width = 1024
    if (width > 1920) width = 1920
    var fontSize = width / 80 + 'px'
    html.style.fontSize = fontSize
  }
  setFont()
  window.onresize = function () { 
   
    setFont()
  }
})()

在vue脚手架中配置rem(这里借助第三方库…)

postcss-pxtorem 可以将像素单位转换成rem单位，官网安装推荐，好像只安装postcss-pxtorem这一个就可

npm install postcss postcss-pxtorem --save-dev

amfe-flexible 可以自动给页面中的 html 标签设置字体大小，以此设置 rem 的基本值

npm i -S amfe-flexible

main.js中

import 'amfe-flexible'

postcss.config.js中

module.exports = { 
   
    plugins: { 
   
      'postcss-pxtorem': { 
   
        rootValue: 24, // 转换px的基准值。 
        propList: ['*']
      }
    }
  }