使用em的响应式媒体查询

Question

已经看到了用于确定布局的各种媒体查询，但最近我看到人们使用 em 找到屏幕尺寸。

这样更好吗，为什么？

Answer 1

使用 em 制作可扩展的样式表。 em是浏览器的相对度量，与百分比单位相同。

实施例

body {
  font-size: 81.25%;
}

@media screen and (min-width: 68em) and (min-height: 53em) {
  body {
    font-size: 87.5%;
  }
}

@media screen and (min-width: 75em) and (min-height: 57em) {
  body {
    font-size: 93.75%;
  }
}

@media screen and (min-width: 80em) and (min-height: 62em) {
  body {
    font-size: 100%;
  }
}

EM单位，然后在视口高度超过特定点时更改正文的字体大小。你read this要清楚知道em是如何工作的。希望这对你有帮助！