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

最新推荐文章于 2025-10-30 18:34:45 发布

原创

最新推荐文章于 2025-10-30 18:34:45 发布 · 2.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章介绍了两种大屏适配方法：一是通过最外层元素的scale属性进行缩放适配，但可能导致变形；二是利用rem和postcss-pxtorem插件，将px自动转换为rem，避免变形，但可能产生空白区域。两种方法各有优缺点，适用于不同的场景。

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

一. 最外层元素增加 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(