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

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

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

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

---

注意：我没有使用vuetify字体，因为在我以前的项目中，当我使用vuetify字体时，字体大小没有调整

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

例：

 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";
  }