使用 rems 在媒体查询中指定断点

Question

我正在使用 rems 指定媒体查询中的断点，如下所示

@media screen and (min-width: 30rem) {}

如果 body {} 中未定义基本字体大小，它将继承浏览器默认字体大小。我听说使用 rems 是最佳做法。我的问题是，如果用户更改浏览器的默认字体大小，那么媒体查询将不会针对预期的屏幕大小。

例如：

30rem (width of view port) = 480px (targeted viewport) / 16px (browser default)

然后用户将字体大小更改为 14px

34rem (width of view port) = 480px (targeted viewport) / 14px (user changed)

作为一种解决方案，可以在 body 标签中定义字体大小。但这又类似于以像素为单位指定视口大小以及使 rems 优于像素的原因。

Answer 1

你说得对，如果基本字体大小是 16px，那么

@media screen and (min-width: 30rem) {}

和

@media screen and (min-width: 480px) {}

两者都会给出相同的结果。

如果您使用浏览器放大，它们也会给出相同的结果。

正如您所指出的，如果用户重置了他们的浏览器字体大小，那么 2 个媒体查询会给出不同的结果。

有一个 good pen on Codepen 来说明这一点。

请注意，在这支笔中，如果您将浏览器字体大小设置为大于或小于 16px，基于 em 的绿色框将小于或大于您的视口，因此这在响应式设计中并不理想。

所以我认为媒体查询中的 px 与 rem 部分取决于您的个人偏好，部分取决于您的设计细节。

FWIW，响应式设计的一个简单选择是在媒体查询中使用 px 并在样式中使用 rems（或 ems），例如

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

来源：https://css-tricks.com/rems-ems/

使用 rems 在媒体查询中指定断点

Using rems to specify breakpoints in media queries

html

css

media-queries

responsive-design