如何在任何纵横比下实现相同的外观/设计？

Question

我在显示元素时遇到问题，在 1920x1080 分辨率下它看起来很棒，但在其他比例（例如 1366x768）下它变得臃肿。我的目标是在不同的纵横比下拥有相同的外观。

这是 1920x1080 分辨率的显示设计

这是 1366x768 分辨率的显示设计

P.S：我没有使用 vuetify 的字体，因为在我之前的项目中，当我使用 vuetify 字体时，font-size 没有调整大小

Answer 1

在每个屏幕尺寸上添加断点，以确定字体大小和您希望在屏幕上响应的其他元素

例如：

 carouselHeight() {
  const x = this.$vuetify.breakpoint.name;
  //console.log(x)
  switch (x) {
    case "xl":
      return "800";
    case "lg":
      return "300";
    case "md":
      return "340";
    case "sm":
      return "230";
    case "xs":
      return "150";
    default:
      return "150";
  }