前言

此前需要开发一个大屏活动页，相信提到大屏页面。适配是一个让人非常头疼的问题。需要适配各种分辨率，显然媒体查询之类的方案是不可取的。总结下来也只有rem适配以及通过transform：scale来实现。 rem的话大家都知道怎么做，就不多说了。下面主要介绍一下scale的方式应该如何去适配。

开始

首先通过缩放去适配的话，我们需要计算出一个缩放比。因为有的屏幕宽比高大而有的则是高比宽大。通常我们是取屏幕的宽高比大于设计稿的宽高比则采用宽的比例否则采用高的比例。也就是下面这样

      if (
    (document.documentElement.clientWidth / document.documentElement.clientHeight) < (designDraftWidth / designDraftHeight)
      ) {
        scale = document.documentElement.clientWidth / designDraftWidth
      } else {
        scale = document.documentElement.clientHeight / designDraftHeight
      }

有了这个宽高比，我们接下来只需要将他设置到跟标签的transform：scale上就行了。

解决白边问题

通过上述设置已经完成了一个最基本的缩放适配。但是使用过的同学会发现，有白边。也就是网页撑不满整个屏幕了。这个时候就需要上黑科技了

当我们的网页被缩放到某个大小后，我们只需要将对应的宽或者高放大回原来的x倍，就可以还原整个网页的大小。也就是达到了填充满屏幕的效果

例如我们此时的缩放比是0.8，那么相对应的需要把宽或者高放大1.8

      if (
    document.documentElement.clientWidth
    / document.documentElement.clientHeight
    < designDraftWidth / designDraftHeight
) {
    scale = document.documentElement.clientWidth / designDraftWidth
    document.querySelector('#screen').style.height = `${
        document.documentElement.clientHeight / scale
    }px`
    document.querySelector('#screen').style.width = `${designDraftWidth}px`
} else {
    scale = document.documentElement.clientHeight / designDraftHeight
    document.querySelector('#screen').style.width = `${
        document.documentElement.clientWidth / scale
    }px`
    document.querySelector(
        '#screen',
    ).style.height = `${designDraftHeight}px`
}

如果采用的是宽度比，则把高度放大，宽度采用设计稿的宽度。相反则把宽度放大，高度采用设计稿的高度。

demo

  mounted() {
    window.onresize = () => this.handleScreenAuto()
  },
methods:{
    handleScreenAuto() {
        const designDraftWidth = 1920 // 设计稿的宽度
        const designDraftHeight = 1080 // 设计稿的高度
        // 根据屏幕的变化适配的比例
        let scale = 0
        // 缩小之后将宽高等比放大填满屏幕，比如整体缩小0.8倍，那宽高放大十分之八就可以还原原来的大小。
        if (
            document.documentElement.clientWidth
            / document.documentElement.clientHeight
            < designDraftWidth / designDraftHeight
        ) {
            scale = document.documentElement.clientWidth / designDraftWidth
            document.querySelector('#screen').style.height = `${
                document.documentElement.clientHeight / scale
            }px`
            document.querySelector('#screen').style.width = `${designDraftWidth}px`
        } else {
            scale = document.documentElement.clientHeight / designDraftHeight
            document.querySelector('#screen').style.width = `${
                document.documentElement.clientWidth / scale
            }px`
            document.querySelector(
                '#screen',
            ).style.height = `${designDraftHeight}px`
        }
        // 缩放比例
        // document.querySelector('#screen').style.transform = `scale(${scale})`
        document.querySelector('#screen').style.zoom = `${scale}`
    },
}

.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.screen-wrapper {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(180deg, #ffe1e9 0%, #ecf1ff 112.41%), #ffffff;
  .screen {
    display: inline-block;
    transform-origin: 0 0;
  }
}

总结

这种方式适配大屏最省事，但是也很简陋。会出现网页模糊的问题，并且如果网页中有canvas的话还会出现点击事件和hover事件有偏差的问题，网上可以搜一下解决方案。如果能接受的话可以采用这种方案，如果接受不了的还是换rem方案吧，rem适配也很简单。