REM

• em 一个 m 的宽度，但是很多时候大家会认为 em 是一个汉字的宽度
• REM 根元素（html）的 font-size，即假设根元素HTML的font-size 是16 px，那么一个 REM 就是16 px
• 网页的默认字体大小就是16px，chrome 默认的最小字体大小是12px。
• 要是更改了 HTML 的字体大小，那么 REM 就会跟着变化

设置动态 REM

```
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>
```

注意： REM 可以与其他单位同时存在

```
 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;
```

在大屏项目中的应用

算法：

• Wp 为页面有效宽度
• Hp 为页面有效高度
• 页面左右居中，上下居中，四周留白即可
• 然后在 head 里用 JS 设置 1rem = Wp / 100

如何适配一个div

div在设计稿的宽度：

假设一个div在设计稿中长100px，设计稿宽度为2420px，那么div在页面中的长度为100/2420*100rem,用函数表示则为：

 const clientWidth = document.documentElement.clientWidth;
 const clientHeight = document.documentElement.clientHeight;
 window.pageWidth=clientWidth/clientHeight>16/9 ? clientHeight*(16/9) :clientWidth;
 const pageHeight = pageWidth/(16/9)
 const px = (n) => (n / 2420) * (window as any).pageWidth;

将div水平垂直居中

水平方向: 直接 margin：0 auto就可以居中。

垂直方向: 可以用浏览器的高度减去 div 的高度，得到的值除以 2，将这个值设置为 div 的 margin-top，div 就可以垂直居中了。

  root.style.height =pageHeight+'px'
  root.style.marginTop =(clientHeight-pageHeight)/2+'px'

具体大屏可视化项目应用可看此文章juejin.cn/post/715281…