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

34,918 阅读2分钟

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

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

yprau-0l4bl.gif

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

<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;
      }
   }
}

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

4t3ps-6ptxc.gif

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;
      }
   }
}

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

lt3x2-a6xmx.gif

3.总结

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