前端页面布局适配问题以及解决方案

大屏适配

目前大屏适配主流的解决方案主要是2种，一种为动态单位单位如百分比，vw/vh,百分比问题点无法对字体大小进行动态设置，项目中也有用比如国家局，第二种页面整体进行缩放，如指挥中心、天津大屏，我们公司业务又有些特殊需要定制化，有侧边栏以及顶部菜单,根据设计稿1920 * 1080进行页面开发就不能进行16:9的比例进行缩放，缩放后会出现变形，这个时候就出现一种妥协的方案，目前来看是最优解。就是定宽、定高，外层出现滚动条，根据宽度变化设置缩放值

 <div
      class="inner1920"
      :style="{
        transform: `scale(${proportion})`,
        backgroundImage: 'url(' + GBIMG + ')',
      }"
    >
      <slot></slot>
      <div :class="['fullscreen__container']" @click="handleFullScreen">
        <img src="../img/full_screen.png" width="18" alt="" />
      </div>
</div>
    updateScale() {
      // 获取真实的视口尺寸
      const currentWidth = document.body.clientWidth;
      const currentHeight = document.body.clientHeight;
      // 获取大屏最终的宽高
      const realWidth = 1920;
      const widthScale = currentWidth / realWidth;
      if (widthScale) {
        this.proportion = widthScale;
      }
    }
    
    .adaptiveLayout {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      overflow-y: scroll;

      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center;

      &::-webkit-scrollbar {
        // display: none;
        width: 0.1px;
        background: transparent;
      }
      .inner1920 {
        width: 1920px;
        height: 1080px;
        position: absolute;
        top: 0;
        left: 0;
        // background-image: url(../img/bgImg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        transform-origin: top left;
      }

    }
    

常规业务页面布局适配

业务代表知识库

这是一个标准的左右布局，右边定宽200px，左边flex：1铺满剩余的宽度，左上方的6个类型也采用flex布局

项目中最常见的布局

顶部设置最小高度，底部动态计算，表格传入高度设置滚动条

多个表格全部定高，这种情况需要展示滚动条