乐趣区

关于前端:前端多屏幕适配的两套方案

jiezi

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

一. 最外层元素减少 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.js
function 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();
// 扭转窗口大小时从新设置 rem
window.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.js
module.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 多平台公布

退出移动版