vue3适配移动端vw vh单位配合@media做的适配

Vue3本身并不提供移动端适配的方案，但是可以使用vw、vh单位，以及@media媒体查询来实现移动端适配。

1. 设置html的font-size
在入口文件中，可以通过计算屏幕宽度来设置html的font-size，例如：

// main.js
const setHtmlFontSize = () => {
  const html = document.documentElement
  const screenWidth = html.clientWidth
  html.style.fontSize = screenWidth / 375 * 16 + 'px' // 375是设计稿宽度，16是基准字体大小
}

setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize)

在上述代码中，我们根据屏幕宽度计算出一个字体大小，然后设置到html标签的font-size属性上。

2. 使用vw、vh单位
在样式中，我们可以使用vw、vh单位来设置元素的宽度、高度、字体大小等。vw表示视口宽度的百分比，vh表示视口高度的百分比。

例如：

.container {
  width: 80vw;
  height: 50vh;
  font-size: 4vw;
}

在上述代码中，.container元素的宽度为视口宽度的80%，高度为视口高度的50%，字体大小为视口宽度的4%。

3. 使用@media媒体查询
有些情况下，我们需要针对不同的屏幕尺寸设置不同的样式。这时候可以使用@media媒体查询来实现。

例如，在手机竖屏状态下，我们需要将某个元素的宽度设置为100%：

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

在上述代码中，当屏幕宽度小于等于768px时，.container元素的宽度会被设置为100%。

综上所述，我们可以使用vw、vh单位配合@media媒体查询来实现移动端适配。