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

Vue3和TypeScript是一对很好的组合，可以提高代码的可读性和可维护性。而vw和vh单位是用来做移动端适配的比较常用的单位之一，可以根据屏幕宽度和高度自适应调整布局。

在Vue3中使用vw和vh单位，可以使用CSS预处理器如Sass或Less来定义变量，然后在组件中引入变量。例如，在Sass中定义：

$mobile-width: 375px;
$desktop-width: 1440px;

@mixin mobile {
  @media (max-width: $mobile-width) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: $desktop-width) {
    @content;
  }
}

然后在组件中引入变量：

<template>
  <div class="container">
    <div class="box">
      <h1>Hello, world!</h1>
    </div>
  </div>
</template>

<style lang="scss">
.container {
  width: 100%;
  height: 100vh;

  @include mobile {
    height: 100%;
  }

  .box {
    width: 50%;
    height: 50vh;

    @include mobile {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

在上面的例子中，使用了两个mixin来定义不同的媒体查询，然后在组件的样式中引用了这些mixin。对于移动端，容器和盒子的高度使用vh单位，对于桌面端，容器的高度使用vh单位，盒子的高度使用vw单位。

总之，使用vw和vh单位来做移动端适配，需要结合媒体查询和CSS预处理器来实现。在Vue3中，可以使用Sass或Less等预处理器来定义变量和mixin，然后在组件中引用这些变量和mixin。