基于等比缩放的大屏自适应方案

前端的数据可视化越来越重要，炫酷大屏的需求越来越多，您是否经常为屏幕不能自适应而烦恼？如何高度还原设计稿？如何在多种终端都呈现完美效果？也许本文可以给您带来帮助

当屏幕宽高比例小于设计稿时，按设计稿比例沿水平方向铺满屏幕。当屏幕宽高比大于设计稿时，按设计稿比例沿垂直方向铺满屏幕。用等比缩放的方式，不论屏幕多大，分辨率是什么，都能呈现完美效果，如下图所示。

本文总结了两种基于等比缩放的大屏自适应方法。以下面的布局为例来说明。

<div className="screen-wrapper">
    <div className="screen" id="screen">
        <div class="section">A</div>
        <div class="section">B</div>
        <div class="section">C</div>
        <div class="section">D</div>
        <div class="section">E</div>
    </div>
</div>

1. 基于transform的自适应方法

首先计算缩放比，根据屏幕大小动态设置<div id="screen">元素的缩放比。代码如下所示：

function setScale(){
    let designWidth = 1366;//设计稿的宽度，根据实际项目调整
    let designHeight = 768;//设计稿的高度，根据实际项目调整
    let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
         (document.documentElement.clientWidth / designWidth):
         (document.documentElement.clientHeight / designHeight);
    document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`;
}
window.onresize = function () {
    setScale()
};

然后设置样式，元素大小完全按照设计稿大小设置。代码如下所示：

$design_width: 1366px;//设计稿的宽度，根据实际项目调整
$design_height: 768px;//设计稿的高度，根据实际项目调整
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua;
   .screen{
      display: inline-block;
      width: $design_width;
      height: $design_height;
      background: yellow;
      transform-origin: 0 0;
      position: absolute;
      left: 50%;
      .section{
         height: 200px;
         width: 200px;
         outline: 1px solid #ddd;
         line-height: 200px;
         font-size: 40px;
         text-align: center;
         display: inline-block;
      }
   }
}

实现效果如下图所示，无论屏幕如何变化，屏幕的内容都是等比缩放展示，不会出现元素变形和错位。当屏幕的比例和设计稿比例一致，会呈现出最佳效果。

2. 基于rem的自适应方法

首先计算缩放比，根据屏幕大小动态设置，根元素html的fontSize值。

setFontSize()
function setFontSize(){
    let designWidth = 1366;//设计稿的宽度，根据实际项目调整
    let designHeight = 768;//设计稿的高度，根据实际项目调整
    var fontSize = 
        document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
        (document.documentElement.clientWidth / designWidth) * 12:
        (document.documentElement.clientHeight / designHeight) * 12;
    document.querySelector('html').style.fontSize = fontSize + 'px';
}
window.onresize = function () {
    setFontSize()
};

设置样式，需将元素单位px转换成rem。

$design_width: 1366;//设计稿的宽度，根据实际项目调整
$design_height: 768;//设计稿的高度，根据实际项目调整

@function px2rem($px) {
   $design_font_size: 12;
   @return ($px/$design_font_size) + rem;
}
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua; 
      display: flex;
      flex-direction: row;
      justify-content: center;
   .screen{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: px2rem($design_width);
      height: px2rem($design_height);
      background: pink;
      .section{
         height: px2rem(200);
         width: px2rem(200);
         border: 1px solid #000;
         line-height: px2rem(200);
         font-size: px2rem(100);
         margin: px2rem(20);
         text-align: center;
         display: inline-block;
      }
   }
}

如下图所示，同样实现了按设计稿的比例展示内容，无论屏幕如何变化，内容都是等比缩放展示，不会出现元素变形和错位。当屏幕的比例和设计稿比例一致，会呈现出最佳效果。

3.总结

• 基于transform缩放的方案，优点是按设计稿设置元素大小，无需转换长度单位。缺点是放大展示时，echarts等图表会出现失真现象。为了避免图表失真，设计稿设计应按大屏尺寸设计，使其在屏幕中缩小展示。比如1920*1080和1366*768同为16:9的设计稿，应按1920*1080尺寸设计。
• 基于rem的缩放方案，元素长度单位需转换为rem。放大展示时，不会出现图表失真的情况。当缩小至根元素fontsize<12px时，由于浏览器展示的最小字号是12px，文字不能被再缩小，会出现比例不协调的情况。解决办法是，设置画布的最小宽度和最小高度，当屏幕小于最小宽度和最小高度时增加滚动条，使画布不再被缩小。