vue3大屏适配:常见方案

1.rem 单位 动态设置 html 的 font-size(不推荐)

如将设计稿的宽(1920)平均分成 24 等份， 每一份为 80px。

动态设置 html 的 font-size可以使用媒体查询或者js来动态改变body的fontsize大小，媒体查询太麻烦，以下是通过js代码动态改变fontsize大小。

1.  
   <template>
2.  
   <div class="factory">
3.  
   哈哈哈哈
4.  
   <img src="@/assets/screen/arrow.png" alt="">
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script setup>
9.  
   import { nextTick } from 'vue';
10.  
    onMounted(() => {
11.  
    nextTick(() => {
12.  
    changesizeFn()
13.  
    })
14.  
    window.addEventListener('resize', changesizeFn)
15.  
    })
16.  
     
17.  
    const changesizeFn = () => {
18.  
    let targetX = 1920
19.  
    let x = document.documentElement.clientWidth
20.  
    //获取body，并改变body的fontsize大小
21.  
    let body = document.documentElement
22.  
    body.style.fontSize = `${(x / targetX) * 24}px`
23.  
    }
24.  
     
25.  
    onBeforeUnmount(() => {
26.  
    window.removeEventListener('resize', changesizeFn)
27.  
    })
28.  
    </script>
29.  
     
30.  
    <style lang="scss" scoped>
31.  
    .factory {
32.  
    width: 24rem;
33.  
    height: 13.5rem;
34.  
    font-size: 0.225rem;
35.  
     
36.  
    img {
37.  
    height: .525rem;
38.  
    }
39.  
    }
40.  
    </style>

缺点：一些第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式，比如有的图表需要单独适配字体。

2.vw/vh

使用vw、vh适配的优点是可以根据屏幕大小自动调整元素大小，使得页面在不同设备上都能够呈现出较好的效果。直接是响应式的，不需要resize事件，

1.  
   <template>
2.  
   <div class="factory">
3.  
   哈哈哈哈
4.  
   <img src="@/assets/screen/arrow.png" alt="">
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script setup>
9.  
    
10.  
    </script>
11.  
     
12.  
    <style lang="scss" scoped>
13.  
    .factory {
14.  
    width: 100vw;
15.  
    height: 56.25vw;
16.  
    font-size: 1vw;
17.  
     
18.  
    img {
19.  
    height: 3vw;
20.  
    }
21.  
    }
22.  
    </style>

缺点：一些第三方库的字体等默认的都是px单位，比如：element、echarts，因此通常需要层叠第三方库的样式，比如有的图表需要单独适配字体。像素较小的情况下不精准。

3.scale(推荐)

直接根据宽度的比率进行缩放。（宽度比率=网页当前宽 / 设计稿宽）

1.  
   <template>
2.  
   <div class="factory">
3.  
   </div>
4.  
   </template>
5.  
    
6.  
   <script setup>
7.  
   import { nextTick } from 'vue'
8.  
   onMounted(() => {
9.  
   nextTick(() => {
10.  
    changeScale()
11.  
    })
12.  
    window.addEventListener('resize', changeScale)
13.  
    }
14.  
    const changeScale = () => {
15.  
    let targetX = 1920
16.  
    let x = document.documentElement.clientWidth
17.  
    let scaleX = x / targetX
18.  
    //动态缩放
19.  
    document.querySelector('.factory').setAttribute('style', `transform:scale(${scaleX}`)
20.  
    }
21.  
    onBeforeUnmount(() => {
22.  
    window.removeEventListener('resize', changeScale)
23.  
    })
24.  
    </script>
25.  
     
26.  
    <style lang="scss" scoped>
27.  
    width: 1920px;
28.  
    height: 1080px;
29.  
    transform-origin: left top; //此处必须加上这个属性,让屏幕一直处于左上角
30.  
    </style>

这篇好文章是转载于：学新通技术网