Question

我有一个查询。如何为4k，5k，视网膜显示屏等高分辨率屏幕设置媒体查询。如我所读，我了解我们可以使用分辨率特定的媒体查询。但是我有一个疑问，如何理解4k 5k屏幕的断点，以及如何知道它们对于未来高分辨率屏幕的可靠性。谁能建议如何在高分辨率屏幕上使用CSS？

Answer 1

如果您将使用相对单位（ em 或 rem ），则可以相等地缩放元素并编写最少的媒体查询。 / p>

已编辑

：

您可以在此示例中查看如何使用 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>

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

1 个答案: