react使用rem适配

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

介绍

rem的作用就是页面的适配，它可以根据设备（网页）的根元素的大小，动态调整，适配各种屏幕。一个rem就是一个根元素的大小，也就是一个我们的网页根元素的fontsize的大小。

操作

我们这里采用的是在react中引入js来使用rem。 首先，我们在react项目pages里，最外面的父组件的index.html文件里，添加以下js代码：

  resizeListener() {
    // 定义设计图的尺寸 3840
    let designSize = 3840;
    // 获取 html 元素
    let html = document.documentElement;
    // 定义窗口的宽度
    let clientW = html.clientWidth;
    let clienH = html.clientHight;
    // html 的fontsize 大小
    let htmlRem = (clientW * 12) / designSize;
    html.style.fontSize = htmlRem + 'px';
    // console.log(clientW);
  }

使用的是一个比例关系：设计图大小：屏幕大小=设计图根元素大小：网页上适配的根元素的大小（x），所以，x=(屏幕大小*设计图根元素大小)/设计图大小。所以也就是上面的 (clientW * 12) / designSize的计算公式。

然后，在componentDidMount中，调用该函数，页面就会适配了。

  componentDidMount() {
    window.addEventListener('resize', this.resizeListener);
    this.resizeListener();
  }

最后，我们就可以在css中使用rem来代替px了。之后当你的屏幕大小发生改变时，就可以观察到页面也能适配，并且是正常显示的。

我接触到的需要使用rem来做整个项目时，特别是做大屏项目，给到我们的原型图是使用软件做的，可以看到各部分的rem大小的，包括图片的大小，字体的大小，fontsize，颜色等。

比较

现在前端css中用到的主要有px，rem，%，vhvw这些单位。px也就是直接定义像素，往往大小是固定死的。rem是根据屏幕根节点的大小，会动态调所有尺寸。%是相对的大小，是上一层大小的百分之几。vhvw则是屏幕的大小单位，它规定100vh=屏幕的高，100vw=屏幕的宽。使用rem，vhvw都可以实现屏幕的适配。