如何在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>