什么是rem : 根据屏幕尺寸宽度,动态设置html标签字体大小

方法一 1.封装一个适配的方法setRem.js

const setRem = () => {
  // 获取屏幕尺寸
  const width = document.documentElement.clientWidth;
  // 设置html字体大小
  document.documentElement.style.fontSize = width / 10 + 'px';
}
初始化执行一次 
setRem();
// 屏幕尺寸发生改变 再次执行 (横屏事件)
window.addEventLisstener('orientationchange', setRem)
// 屏幕尺寸发生改变
window.addEventListener('resize', setRem)

2.在需要的位置引入 main.js

import '_assets/setRem/setRem.js'

方法二 1.npmjs官网(专门为手机尺寸设置的宽度,最大640px) cnpm i lib-flexible -S

2.在需要的位置引入 main.js

import 'lib-flexible'

将所有元素的单位字体设置rem (字体大小)

如何设置rem 根据设计图 尺寸 如何变成rem 举例: 移动端 设计图 宽度 750px 总结一句话: 设计图 宽度是多少,rem单位就是10分之一 比如 宽度750px 一个rem就是75px 设计图 某个元素 是多少像素 除以 设计图 10分之一 就是rem单位

使用插件可以解决:

vscode插件 ---安装 px to rem Alt + S 设置rem单位 设置为 设计图 宽度的十分之一 Alt + Z 将 px 转换成rem