数据大屏 rem 适配方案

一般来说，做 PC 端的页面并不像移动端那样对分辨率及屏幕大小有的特别强的要求，但是针对数据大屏这种展示型的页面来说，就需要考虑适配的方案了，毕竟要尽可能的保证大部分的主流显示器都能正常展示。

市面上大部分的显示器几乎都是16：9的尺寸，也就是1920 * 1080的分辨率。

理想中的效果

• 当屏幕的尺寸比例刚好是 16：9 时，页面能刚好全屏展示，内容占满显示器

  
  

• 
  

• 当屏幕的尺寸比例小于 16：9 时，页面上下留白，左右占满并上下居中，显示比例保持 16：9

  
  

• 
  

• 当屏幕尺寸比例大于 16：9 时，页面左右留白，上下占满并居中，显示比例保持 16：9

  
  

当屏幕大小改变时，动态计算中间内容的显示比例大小，保证内容一直保持 16：9

解决方案

rem

rem(font size of the root element),是 css3 中新增的一个大小单位，即相对于根元素 font-size 值的大小。

思路就是动态的计算出页面的 fontsize 从而改变 rem 的大小。

思路

首先拿 1920 * 1080 的标准屏幕大小为例。将屏幕分为10份，先计算rem的基准值: 1920 / 10 = 192 ,然后把所有元素的长，宽，位置，字体大小等原来的 px 单位全部转换成 rem, 网页加载后，用 js 去计算当前浏览器的宽度，并设置 html 的 font-size 为 (当前浏览器窗口宽度 / 10),这样的话 10rem 就刚好等于浏览器窗口的宽度。也就可以保证 100%宽度，等比例缩放设计稿的页面了。

两件事：

1. 获得 rem 的基准值。这边默认设置容器宽度为 1920 * 1080，然后用 1920 / 192 来计算 rem 的值

2. 页面内写一段 js 代码，动态的计算html根元素的font-size
   

实现

站在巨人的肩膀上，我们不需要去从 0 到 1 去实现两个需求。

针对第一点：

• 首先安装 @njleonzhang/postcss-px-to-rem 这个包

npm i @njleonzhang/postcss-px-to-rem -D复制代码

• 新建.postcssrc.js配置文件

module.exports = {  plugins: {    autoprefixer: {},    "@njleonzhang/postcss-px-to-rem": {      unitToConvert: 'px', // (String) 要转换的单位，默认是px。      widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是1920.      unitPrecision: 3, // (Number) 允许 REM 单位增长到的十进制数字.      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器.      minPixelValue: 1, // (Number) 设置要替换的最小像素值.      mediaQuery: false // (Boolean) 允许在媒体查询中转换 px.    }  }}​复制代码

• 配置完成后，页面内的 px 就会被转换成 rem 了

针对第二点：

• 新建一个 rem.js 文件,在入口中引入，用于动态计算 font-size

  (function init(screenRatioByDesign = 16 / 9) {  let docEle = document.documentElement  function setHtmlFontSize() {    var screenRatio = docEle.clientWidth / docEle.clientHeight;    var fontSize = (      screenRatio > screenRatioByDesign        ? (screenRatioByDesign / screenRatio)       : 1   ) * docEle.clientWidth / 10;    docEle.style.fontSize = fontSize.toFixed(3) + "px";    console.log(docEle.style.fontSize); } ​  setHtmlFontSize() ​  window.addEventListener('resize', setHtmlFontSize) })() 复制代码
  

至此，页面就已经可以实现 16：9 自适应了

最后

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163 相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 ！