数据大屏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 复制代码

更多文章请关注《万象专栏》