一般来说，做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...不胜感激 ！