前端rem适配(自适应布局)

前言

在开发过程中，前端会存在多种不同的适配方案，如自适应布局，响应式布局。

自适应布局：在不同设备，不同视口宽度的情况下，让页面显示效果相同。
响应式布局：在不同设备，不同视口宽度的情况下，让页面显示不同的效果，如手机端和PC端的不同效果。

在自适应布局中，em、rem是目前常用的适配手段，接下来主要探讨使用rem进行自适应适配的方案。

一、场景

已知设计图宽度是1920*1080，现需要对不同终端，不同屏幕大小(如1920*1080 125%，1920*1080 100% ，2560*1600 125%，3000*2000 200&本人电脑)进行适配。

二、计算

模糊计算

一般在使用rem做自适应布局中，会首先未根节点设置一个数值( html: { font-size: 62.5% } );

其计算过程如下：

1. 首先大多数浏览器的默认字体大小都是16px；根据rem计算原则得到此时的rem为

1rem = 根节点字体大小 = 16px

2. 为了方便计算，此时想把 1rem = 10px，之后的开发中设置125px可以直接转化成12.5rem

html { font-size: 62.5% } ( 10px / 16px )

3. 所以此时 1rem = 16px * 62.5%(10px / 16px) = 10px

精确计算

开发之前，先对照设计图计算并设置出rem

const setRem = () => {
  const reScreenSize = (wid) => {
    // 当设备宽度小于1400px时，不在改变rem的值
    if (wid <= 1400) return;
    let w = document.documentElement.clientWidth; // 获取设备的宽度
    let n =
      10 * (w / 1920) > 40
        ? 40 + 'px'
        : 10 * (w / 1920) >= 7.4
        ? 10 * (w / 1920) + 'px'
        : 7.4 + 'px';
    document.documentElement.style.fontSize = n;
  };
  reScreenSize();
  window.addEventListener('load', reScreenSize);
  window.addEventListener('resize', () => reScreenSize(document.documentElement.clientWidth));
};
export default setRem;

本次开发场景是应用与React中，创建一个设置rem的工具类。

三、理解

个人理解在使用rem时与使用%进行对不同设备进行适配时的效果和原理相近，只不过在使用百分比进行开发时不容易控制细节问题，所以在一些细节掌控方面还需要进行rem适配及计算。对本场景的理解如下：

使用场景：1920*1080设计稿

设置rem：为方便计算，设置 1rem = 10px（这里的px相对于设计稿来说）

计算：

1rem = 10 * ( 视口宽度 / 设计稿宽度 )

在此基础上增加一些不同情况的容错，最后可以得：

const reScreenSize = (wid) => {
    if (wid <= 1400) return;
    let w = document.documentElement.clientWidth; // 获取设备的宽度
    let n =
      10 * (w / 1920) > 40
        ? 40 + 'px'
        : 10 * (w / 1920) >= 7.4
        ? 10 * (w / 1920) + 'px'
        : 7.4 + 'px';
    document.documentElement.style.fontSize = n;
  };

在计算好rem后，添加监听事件，当页面加载load以及视口变化resize时，执行监听事件去改变rem，以达到对不同设备适配，不同放大比例适配。

四、效果

1920*1080 100% 设备下显示

3000*2000 100% 设备下显示

开发小贴士：

在使用VsCode进行前端开发时，VsCode有一个叫px to rem & rpx & vw (cssrem)的插件，可以设置rem的基准font-size：10。在样式时，可以按照设计图直接输入300px，会有代码提示换算后的rem，无需手动在计算，非常好用o(￣▽￣)ｄ

总结

在自适应适配中，利用rem相对尺寸的特性，根据视口大小的不同，不变改变根节点的字体大小，从而改变rem的相对大小，最后计算得出在不同视口下的px。

以上是在项目中，碰到的关于使用rem适配的问题，以及个人对rem的理解。后续如果有新的理解会不断更新。