在大屏开发中，最常遇到的就是多屏幕适配了。这里提供两套简略实用的计划。

一. 最外层元素减少 scale

这里的最外层元素指的是能蕴含所有页面的元素。咱们能够给最外层元素设置固定的宽高，比方 1920 * 1080。一旦大屏的尺寸跟设定的不合乎，则通过缩放相应的倍数来适配大屏。<br/>
具体代码如下：

// 获取缩放倍率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 问题解决办法

本文由mdnice多平台公布