css - 使用 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 单位，然后当视口(viewport)高度超过某个点时更改 body 的字体大小。你read this弄清楚 em 是如何工作的。希望对您有所帮助!