共计 1821 个字符，预计需要花费 5 分钟才能阅读完成。
一般来说，做 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% 宽度，等比例缩放设计稿的页面了。
两件事：
取得 rem 的基准值。这边默认设置容器宽度为 1920 * 1080，而后用 1920 / 192 来计算 rem 的值
页面内写一段 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/ZhongBangKe… 不胜感激！
