一文讲清大屏适配（四个屏幕也不怕）

水深无声 2023-10-09 20:27 26阅读 0赞

## ![a1914694a65f4d9da126df117392f02e.png][] ##

## 前言 ##

政企项目少不了大屏适配的场景，如何打造完美的大屏适配解决方案呢？

## 解决方案 ##

大屏幕适配需要从以下几个方面入手，第一个是宽高、第二个是字体大小、第三个是三方库的设置。

### 1.针对宽高： ###

从最外层到最内部的所有盒模型布局相关（margin/padding/width/height），全部用百分比来完成，部分无法撑开的高度可以用vh来完成。

### 2.针对字体大小： ###

需要使用rem，并封装对应的flexible，根据视觉稿来对应

举个例子：

const baseSize = 16
    // 设置 rem 函数
    function setRem () {
      const scale = document.documentElement.clientWidth / 1920
      document.documentElement.style.fontSize = baseSize * Math.min(scale) + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem()
    }

同时封装css预处理器相关函数：

@function pxTorem($px){//  默认16px
      @return $px / 16 * 1rem;
    }

### 3.针对三方库 ###

有些三方库设置的时候是以像素为主的，故而在大屏视频中，需要手动计算，故而我们需要在resize时做一段逻辑，拿到一个charScale的缩放比例，这里以vue的mixin为例子：

import _ from 'lodash'
    
    export default {
      data() {
        return {
          charScale: 0.5
        }
      },
      mounted() {
        this.__resizeHandler = _.debounce(() => {
          const clientWidth = document.body.clientWidth
          if (clientWidth) {
            this.charScale = clientWidth / 1920
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)
        this.charScale = document.body.clientWidth ? document.body.clientWidth / 1920 : 1
      },
      beforeDestroy() {
        window.removeEventListener('resize', this.__resizeHandler)
      },
      methods: {
        // use $_ for mixins properties
        // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
        $_sidebarResizeHandler(e) {
          if (e.propertyName === 'width') {
            this.__resizeHandler()
          }
        }
      }
    }

[a1914694a65f4d9da126df117392f02e.png]: https://img-blog.csdnimg.cn/a1914694a65f4d9da126df117392f02e.png