Как установить медиа-запросы для экранов с высоким разрешением в формате HTML

Question

У меня есть запрос.Как настроить медиазапросы для экранов с высоким разрешением, таких как 4k, 5k, отображение сетчатки и т. Д. Поскольку я читал об этом, я понял, что мы можем использовать медиазапросы, специфичные для разрешения.Но у меня есть вопрос о том, как понять контрольные точки для экранов 4k 5k и узнать, насколько они надежны для будущих экранов с высоким разрешением.Кто-нибудь может подсказать, как использовать CSS для экранов с высоким разрешением?

Answer 1

Если вы будете использовать относительные единицы ( em или rem ), это даст вам возможность равного масштабирования для элементов и записи минимального количества медиазапросов.

РЕДАКТИРОВАНИЕ:

Вы можете увидеть, как использовать em на этом примере:

.parent {
  background: red;
  font-size: 20px;
  padding: 1em;
}

.child {
  margin: 1em;
  font-size: 15px;
}

.childOfChild {
  margin-left: 1em;
  font-size: 2em;
}

<div class="parent">
  <h2 class="child">
    Hello World!
    <span class="childOfChild">Some Text</span>
  </h2>
</div>

Вы можете увидеть, как использовать rem на этом примере:

html {
  font-size: 16px;
}

.child {
  font-size: 1rem;
  padding: 1rem;
  background: blue;
  color: white;
}

.childOfChild {
  font-size: 0.8rem;
  margin-left: 1.2rem;
}

@media (min-width: 2000px) {
  html {
    font-size: 20px;
  }
}

@media (max-width: 1200px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 12px;
  }
}

<div class="parent">
  <h2 class="child">
    Hello World!
    <span class="childOfChild">Some Text</span>
  </h2>
</div>