Вычисление высоты в отзывчивой (резиновой) верстке

Question

Как вычислить ширину блока (width) страницы при отзывчивой (резиновой) верстке (необходимо умножить ширину окна страницы (общая ширина страницы сайта, которого создаю) на коэффициент, равный отношению ширины соответствующего блока в фигме к ширине макета страницы в фигме - некоторый процент) фигма-макета я понимаю. Подскажите, как вычислить высоту блока (height) сайта при отзывчивой (резиновой) верстке (ведь заранее высота содержимого страницы неизвестна, есть только высота в фигме).

Я хочу добиться отзывчивой (резиновой верстки), чтобы и ширина и высота были пропорциональны. Не понятно относительно чего высчитывать высоту (ширину понятно, а высоту нет - ведь заранее высота разрабатываемой страницы сайта неизвестна, известен только коэффициент).
Насколько необходимо в реальных задачах вычислять высоту при отзывчивой верстке? Как достигается отзывчивость в плане высоты и необходима ли она вообще?
Пример

Есть макет Create Innovate Connect. Его размер - 1920 * 1080.

Внутри него есть блок с заголовком Create Innovate Connect c размером - 1264 * 784.

Размер моего экрана - 1280 * 1024. Тогда ширина блока Create Innovate Connect на моем мониторе будет равна 1280 * (1264 / 1920). Как вычислить высоту блока Create Innovate Connect?

Answer 1

body {
  background-image: url(https://i.stack.imgur.com/KqOIj.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  min-height: 100px;
  height: 100vh !important;
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

a.logo img {
  max-width: 120px;
  max-height: 30px
}

.layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

header {
  display: flex;
  flex-direction: row;
  width: calc(100% - 40px);
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px;
}

nav {
  justify-content: center;
}

header nav a {
  display: inline-block;
  text-decoration: none;
  padding: 5px 10px;
}

.contact_btn {
  color: #FFFFFF;
  background-color: #ff7800;
  border: 0 !important;
  border-radius: 5px;
  padding: 4px 10px;
}

.cover {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

h1 {
  color: #FFFFFF;
  text-align: center;
}

a {
  color: #FFFFFF;
}

footer {
  display: flex;
  flex-direction: row;
  width: calc(100% - 40px);
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px;
  color: #FFFFFF;
}

@media (max-width: 400px) {
  header {
    flex-direction: column;
  }
  footer {
    flex-direction: column;
  }
  header nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

<html>

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>

<body>
  <div class="layout">
    <header>
      <a href="#" class="logo">
        <img src="https://i.stack.imgur.com/C177e.png" />
      </a>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Membership</a>
      </nav>
      <button class="contact_btn">Contact Us</button>
    </header>

    <div class="cover">
      <h1>Create<br/>Innovate<br/>Connect</h1>
    </div>

    <footer>
      <nav>
        <a href="#">Noname Company</a> <span>&copy; 2024</span>
      </nav>
    </footer>

  </div>
</body>

</html>

БЛОГ НА HUSL

Вычисление высоты в отзывчивой (резиновой) верстке

Ответы (1 шт):