数据大屏rem适配方案

一般来说,做PC端的页面并不像移动端那样对分辨率及屏幕大小有的特别强的要求,但是针对数据大屏这种展示型的页面来说,就需要考虑适配的方案了,毕竟要尽可能的保证大部分的主流显示器都能正常展示。
市面上大部分的显示器几乎都是16:9的尺寸,也就是1920 * 1080的分辨率。
理想中的效果
当屏幕的尺寸比例刚好是16:9时,页面能刚好全屏展示,内容占满显示器
数据大屏rem适配方案
文章图片

当屏幕的尺寸比例小于16:9时,页面上下留白,左右占满并上下居中,显示比例保持16:9
数据大屏rem适配方案
文章图片

当屏幕尺寸比例大于16:9时,页面左右留白,上下占满并居中,显示比例保持16:9
数据大屏rem适配方案
文章图片

当屏幕大小改变时,动态计算中间内容的显示比例大小,保证内容一直保持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%宽度,等比例缩放设计稿的页面了。
两件事:
获得 rem 的基准值。这边默认设置容器宽度为1920 * 1080,然后用1920 / 192 来计算rem的值
页面内写一段js代码,动态的计算html根元素的font-size
实现
站在巨人的肩膀上,我们不需要去从0到1去实现两个需求。
【数据大屏rem适配方案】针对第一点:
首先安装 @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/ZhongBangKe...不胜感激 !

    推荐阅读