Как добиться одинакового внешнего вида / дизайна в любом соотношении сторон?

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

У меня возникла проблема с отображением элементов, в разрешении 1920×1080 это выглядит великолепно, но в другом соотношении, таком как 1366×768, оно раздулось. Моя цель — иметь одинаковый внешний вид в разных соотношениях сторон.

Это дизайн дисплея с разрешением 1920×1080 введите описание изображения здесь

Это дизайн дисплея с разрешением 1366×768 введите описание изображения здесь

P.S: Я не использовал шрифт vuetify, потому что в моем предыдущем проекте, когда я использую шрифты vuetify, размер шрифта не изменяется

Ответ №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";
  }