在大屏开发中，最常遇到的就是多屏适配。这里有两个简单实用的解决方案。1.给最外层元素添加刻度这里的最外层元素是指可以包含所有页面的元素。我们可以给最外层的元素设置一个固定的宽高，比如1920*1080。一旦大屏的尺寸与设置的尺寸不匹配，就会通过缩放对应的倍数适配大屏。
具体代码如下：//获取比例因子getScale=()=>{const[width,height]=[1920,1080];让widthScale=window.innerWidth/宽度;让heightScale=window.innerHeight/height;return[widthScale,heightScale];};//设置比例因子setScale=()=>{const[widthScale,heightScale]=this.getScale();让containerDom=document.getElementById('container');containerDom.style.transform=`scale(${widthScale},${heightScale})`;containerDom.style.transformOrigin='lefttop';};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();让containerDom=document.getElementById('container');//如果屏幕缩放变形不是太严重，直接缩放constrate=widthScale/heightScale;if(rate>=0.7&&rate<=1.428){containerDom.style.transform=`scale(${widthScale},${heightScale})`;}else{//否则取最小的缩放因子constscale=widthScale>heightScale?高度比例：宽度比例；containerDom.style.transform=`scale(${scale})`;}containerDom.style.transformOrigin='左上';};2、rem用postcss实现rem-pxtorem为根元素字体大小。根据屏幕大小动态调整rem的大小，实现多屏适配。代码如下：//rem.jsfunctionsetRem(){//basesizeconstbaseSize=100;让vW=window.innerWidth;//当前窗口的宽度letbasePc=baseSize/1920;让rem=vW*basePc；//将默认比例值乘以当前窗口宽度，得到对应的字体大小值remwindow.addEventListener('resize',()=>{setRem();});但是在开发的时候，使用rem来写样式又费时又费力。最好的办法就是正常写px的样式，通过postcss-pxtorem插件自动完成px到rem的转换。具体处理如下：1、安装postcss-loader和postcss-pxtoremnpminstallpostcss-loaderpostcss-pxtorem--save-dev安装后可能会遇到postcss-pxtorem需要PostCSS8的问题，这是因为versionofpxtoremistoohigh降低pxtorem的版本可以解决。具体可以参考文章：PostCSS插件postcss-pxtorem需要PostCSS8问题解决方案2配置pxtorem是postcss的一个插件，我们在postcss.config.js中进行配置。代码如下：//postcss.config.jsmodule.exports={plugins:[require('postcss-pxtorem')({rootValue:100,propList:['*'],exclude:/node_modules///这里表示不处理node_modules文件夹下的Contents})]}然后我们在webpack中配置postcss-loader，代码如下：//...rules:[{test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader"],},{test:/\.less$/,使用:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader"],},]//...其中postcss-loader处理css，所以放在less之前。所有px经过postcss-pxtorem处理后，会自动转为rem。我们配置的样式：浏览器中的样式：可以看到我们配置的样式由px转为rem。3、两种方式比较scale方式，比较好用，但是当目标屏幕和设置的屏幕宽高比比较大时，使用scale方式进行缩放会导致字体和图片变形。如图：rem不会变形，而是完全按照屏幕宽度缩放。有时可能底部空间较多，或者底部空间不足时出现滚动条。如图：参考资料：前端大屏项目屏幕适配方案的webpack配置postcss-pxtoremPostCSS插件postcss-pxtorem需要PostCSS8问题解决本文由mdnice多平台发表
