rem的实现

css实现适配

设备宽度大， 元素尺寸大

设备宽度小，元素尺寸小

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

插件实现适配

使用postcss-pxtorem插件 

js实现适配

rem(倍数） = width / （html的font-size）=> width = (html的font-size) * rem(倍数)

使用 JavaScript 实现 rem 适配的方式需要两个步骤：

1. 计算并设置根元素的 font-size 值。通常情况下，我们将根元素默认的 font-size 设置为 16px，然后通过 JS 计算出当前设备宽度下的根元素 font-size 值，再设置给根元素。

2. 在需要使用 rem 单位的地方，根据计算得到的根元素 font-size 值，将需要设置的数值除以根元素 font-size 值，得到对应的 rem 数值。

具体的实现方式如下：

// 计算并设置根元素的 font-size 值
function setRemUnit() {
  const baseSize = 16; // 默认基准字体大小
  const designWidth = 375; // 设计稿宽度
  const screenWidth = window.innerWidth; // 屏幕宽度
  const fontSize = screenWidth / designWidth * baseSize;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRemUnit(); // 页面加载时先执行一次

// 监听窗口大小变化，重新计算 font-size 值
window.addEventListener('resize', setRemUnit);

上述代码中，我们定义了三个变量：

• baseSize：默认的基准字体大小，即根元素默认的 font-size 值。
• designWidth：设计稿的宽度，通常是 750 或者 375 等像素值。
• screenWidth：当前屏幕的宽度，在浏览器中可以通过 window.innerWidth 获取。

然后我们使用 setRemUnit() 函数计算并设置根元素的 font-size 值，最后监听窗口大小变化事件，当窗口大小发生变化时，重新计算并设置根元素的 font-size 值。