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

​