我的设计稿为375px、667px,怎么做vh的适配

对于375px、667px的设计稿，可以按照以下方式进行vh的适配：

1. 计算出视口宽度和高度的比例，即viewport aspect ratio，公式为 aspect ratio = 视口宽度 / 视口高度。
2. 通过CSS的@media查询，在不同的设备尺寸下设置不同的视口宽度和高度。

例如，在iPhone 6/7/8中，视口宽度为375px，视口高度为667px。计算出视口宽度和高度的比例为 375/667 = 0.5625。因此，可以通过以下代码进行vh适配：

@media (max-aspect-ratio: 0.5625) {
html {
font-size: calc(100vw / 3.75);
}
}

@media (min-aspect-ratio: 0.5625) {
html {
font-size: calc(100vh / 6.67);
}
}

这样就可以在不同的设备尺寸中，保证页面的vh适配效果。

相关问题

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媒体查询来实现移动端适配。

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。