大屏REM适配方案

分辨率

常见分辨率

• 1920 * 1080 （16：9 1080p）
• 3840 * 2160 （16：9 近4k）
• 3120 * 1080 （26：9 2k）
• 3840 * 1080 （32：9 近4k）

什么是REM？

rem在css当中充当的是length的单位，这个单位代表根元素（通常为 元素）的 font-size 大小。当用在根元素的 font-size 上面时，它代表了它的初始值。意思就是说假如html的font-size: 16px;，div的 width: 10rem; 就相当于width的长度有160px。

如何决定根元素的font-size大小

如何决定根元素的font-size大小这里就要看适配的场景(移动端 or 桌面端)，以rem单位适配分为两种方式设置html的font-size：宽度、高度
我这里准备了一个demo用于观测盒子和字体之间的变化的demo

以下是根据宽和高适配后随意拉伸的实际结果（原稿分辨率1920*1080）

1920 * 1080 （16：9 1080p）

3840 * 2160 （16：9 近4k）

3120 * 1080 （26：9 2k）

3840 * 1080 （32：9 近4k）

随意拉伸

上方视频为以高度适配

上方视频为以宽度适配

各分辨率实际效果的结论

• 与UI设计原稿长宽比相同的情况下，使用高或宽几乎没有任何变化。
• 使用宽适配时，虽然左中右的宽度比例能够很好的动态变化，但是左中右两边面板两边业务组件的高度肯定不够足以显示
• 使用高适配时，左右的宽度几乎没有改变，中间的宽度被拉伸的空间比较大(中间的宽度 = 100% - 左宽度 - 右边度)

总结

通过高度的方式设置根节点 font-size 大小适配大屏效果更妥当！
考虑到大屏系统使用的显示设备通常都是宽比高更长，而且常见的分辨率也不会出现宽比高短的问题，相反移动端更适合使用宽度适配。

如何使用

I设计师出设计稿时仅需按照16：9的长宽比出设计即可。
前端人员在开发样式的时候使用rem作为单位，这里推荐两个编译器插件可以通过快捷键自动将px转换成rem：
WebStorm 可以使用 px2rem 插件
VSCode可以使用 px to rem & rpx & vw (cssrem) 插件

Echart或其他部分工具有的可以兼容rem单位，不兼容rem的可以使用下方方法 transformScaleWidth 或 transformScaleHeight ，两者的区别就是适用于宽度计算或高度计算。

核心代码

//    main.js 或 主要入口文件
setRootFontSize()
window.addEventListener('resize', setRootFontSize)
window.px2rem = px2rem
window.rem2px = rem2px


//    utils.js
export function setRootFontSize() {
   
    const designHeight = 1080 //  UI设计稿的高度
    const designFontSize =