如何在HTML中为高分辨率屏幕设置媒体查询

Question

我有一个查询。如何为高分辨率屏幕（例如4K，5K，Retina Display等）设置媒体查询。正如我一直在阅读有关的媒体屏幕，我知道我们可以使用特定于分辨率的媒体查询。但是我有一个查询如何了解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>