移动端vw vh的抉择问题 及font-size该基于谁转换

Question

例如在宽500px 高1000px 的设计稿中 有一个div 宽250px 高500px 字体50px
在使用vw vh时候 是分别使用两者 如

width: 50vw;
height 50vh;
font-size: ?(vw/vh)

还是 仅仅使用 vw

width: 50vw;
height: 100vw;
font-size: ?(vw/vh)

按语义来说我觉得第一种更合理，但是参考了一些postcss的插件
如postcss插件
它最终的output好像 demo种给出的都是vw 就感到比较困惑

input

.class {
  margin: -10px .5vh;
  padding: 5vmin 9.5px 1px;
  border: 3px solid black;
  border-bottom-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

.class2 {
  padding-top: 10px; /* px-to-viewport-ignore */
  /* px-to-viewport-ignore-next */
  padding-bottom: 10px;
  /* Any other comment */
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

output

.class {
  margin: -3.125vw .5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw; //字体也是vw
  line-height: 6.25vw; // line-height 也是vw
}

.class2 {
  padding-top: 10px;
  padding-bottom: 10px;
  /* Any other comment */
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 6.25vw;
  line-height: 9.375vw;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

最后就是 font-size 在postcss output中是基于vw的 那请问font-size是基于vw最合理吗，有基于vh的情况吗？其他类似的属性呢 margin padding 等 基于vh 还是vw来使用呢

Answer 1

通常基于宽度。
因为内容高度不固定