在大屏开辟中，最常碰到的就是多屏幕适配了。这里提供两套简单素用的方案。
一. 最外层元素增长 scale
这里的最外层元素指的是能包含全部页面的元素。我们可以给最外层元素设置固定的宽高，比如 1920 * 1080。一旦大屏的尺寸跟设定的不符合，则通过缩放相应的倍数来适配大屏。
具体代码如下：
// 获取缩放倍率getScale = () => { const [width, height] = [1920, 1080]; let widthScale = window.innerWidth / width; let heightScale = window.innerHeight / height; return [widthScale, heightScale];};// 设置缩放倍率setScale = () => { const [widthScale, heightScale] = this.getScale(); let containerDom = document.getElementById('container'); containerDom.style.transform = `scale(${widthScale}, ${heightScale})`; containerDom.style.transformOrigin = 'left top';};componentDidMount() { this.setScale(); this.windowResizeListener = window.addEventListener('resize', this.setScale);}componentWillUnmount() { window.removeEventListener('resize', this.windowResizeListener);}具体结果如下：
这样处理处罚，无论什么样的大屏，都可以通过缩放来到达适配。缺点是，如果大屏宽高比与设定尺寸宽高比不一致，则会变形。当碰到非常的宽高比大概会变形严峻。
有个折中的处理处罚办法，当宽的缩放跟高的缩放比率在某个区间时 (这里我们取[0.7, 1.428]) ，正常缩放；否则就去小的谁人倍率缩放。这样处理处罚可以大概包管变形不严峻，但是会空出一部分空缺空间。代码如下：
setScale = () => { const [widthScale, heightScale] = this.getScale(); let containerDom = document.getElementById('container'); // 如果屏幕缩放变形不是太严峻，则直接缩放 const rate = widthScale / heightScale; if (rate >= 0.7 && rate <= 1.428) { containerDom.style.transform = `scale(${widthScale}, ${heightScale})`; } else { // 否则取最小的倍率缩放 const scale = widthScale > heightScale ? heightScale : widthScale; containerDom.style.transform = `scale(${scale})`; } containerDom.style.transformOrigin = 'left top';};二. rem 共同 postcss-pxtorem 实现
rem 是根元素字体巨细。根据屏幕尺寸巨细动态调解 rem 的巨细，即可实现多屏幕适配。代码如下：
// rem.jsfunction setRem() { // 基准巨细 const baseSize = 100; let vW = window.innerWidth; // 当前窗口的宽度 let basePc = baseSize / 1920; let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值 document.documentElement.style.fontSize = rem + 'px';}// 初始化setRem();// 改变窗口巨细时重新设置 remwindow.addEventListener('resize', () => { setRem();});但是开辟的时候，写样式用 rem 比力费时费力。最好的方式是正常用 px 写样式，通过 postcss-pxtorem 插件主动完成 px 到 rem 的变化。具体处理处罚如下：
1. 安装 postcss-loader 与 postcss-pxtorem
npm install postcss-loader postcss-pxtorem --save-dev安装后，大概会碰到postcss-pxtorem requires PostCSS 8的标题，这是由于pxtorem的版本过高导致的，低沉pxtorem的版本即可办理。具体可参考文章：PostCSS plugin postcss-pxtorem requires PostCSS 8 标题办理办法
2. 设置
pxtorem 是 postcss 的一个插件，我们在 postcss.config.js 中设置它。代码如下：
// postcss.config.jsmodule.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 100, propList: ['*'], exclude: /node_modules/ //这里体现不处理处罚node_modules文件夹下的内容 }) ]}然后我们在 webpack 中设置 postcss-loader,代码如下：
// ...rules:[ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "postcss-loader" ], }, { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "less-loader" ], }, ]// ...此中, postcss-loader 是对 css 举行处理处罚的, 因此放在 less 之前。
通过postcss-pxtorem处理处罚后，全部的px都会被主动转成rem。
我们设置的样式：
欣赏器中的样式：
可以看到我们设置的样式从px转换成了rem。三、两种方式对比
scale 的方式，使用简单，但当目的屏幕与设置屏幕宽高比差距比力大的时候，使用 scale 缩放会导致字体、图片变形。如图：
rem 不会变形，但完全按照屏幕宽度缩放的，偶然候大概底部空间剩余较多，大概底部空间不敷出现滚动条。如图：
参考资料：
前端大屏项目的屏幕适配方案
webpack设置postcss-pxtorem
PostCSS plugin postcss-pxtorem requires PostCSS 8 标题办理办法 |
