大屏适配方案

vue中使用rem

App.vue

<script>
export default{}
document.addEventListener('DOMContentLoaded',()=>{

const html  =  docuemnt.querySelector('html')

let fontSize  =  window.innerWidth/10

fontSize  =  fontSize  >50  ?50:fontSize

html.style.fontSize  =  fontSize  +  'px'

  
})
</script>
<style lang="scss" scoped>
@import "./assets/styles/global.scss"
    .text {
      .text{
         font-family:"Days one";
         font-size: px2rem(20);//20px 在当前的屏幕下应该是多少rem
         color:orange
      }
    }
</style>

mian.js

import './assets/styles/global.scss'

global.scss

import "./reset";
$ratio:375/10;
@function px2rem($px){
 @return $pcx/$ratio + rem
}

大屏适配

根据屏幕的变化适配比例
一般设计稿的宽高 1980*1080

<template>
  <div class="screen-wrapper">
    <div class="screen" id="screen"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handleAutoScreen () {
      const designDraftWidth = 1920 //设计搞的宽度
      const designDraftHeight = 960 //设计搞的高度
      
      // 如果当前屏幕比例<设计搞比例  那么需要缩放的比例就是屏幕宽度除以设计稿宽度
      // 如果当前屏幕比例>设计搞比例   那么需要缩放的比例就是屏幕高度除以设计稿的高度
      const scale =
        document.documentElement.clientWidth /
          document.documentElement.clientHeight <
        designDraftWidth / designDraftHeight
          ? document.documentElement.clientWidth / designDraftWidth
          : document.documentElement.clientHeight / designDraftHeight
      document.querySelector(
        '#screen'
      ).style.transform = `scale(${scale}) translate(-50%)`
    }
  },
  mounted () {
    // 初始化自适应  ----在刚显示的时候就开始适配一次
    this.handleAutoScreen()
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => this.handleAutoScreen()
  },
  destroyed () {
    window.onresize = null
  }
}
</script>

<style lang="scss" scoped>
.screen-root {
  height: 100%;
  width: 100%;
  .screen {
    display: inline-block;
    width: 1920px; //设计稿的宽度
    height: 960px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
  }
}
</style>