在媒体查询中使用 rem 单位和作为宽度答案

【问题标题】：Using rem units in media queries and as width在媒体查询中使用 rem 单位和作为宽度
【发布时间】：2018-05-04 17:01:31
【问题描述】：

在 Google Chrome（或 firefox）中使用 rem 单位时，结果出乎意料。我设置了一个页面，将根字体大小设置为 10px，以便更轻松地将基于像素的设计转换为 html/css。

这是我的 CSS。我的期望是一个页面有一个 500px 宽的盒子，如果屏幕宽于 500px，背景应该变成红色。

html {
font-size: 10px;
}

@media screen and (min-width: 50rem){
  body{
    background-color: red;
  }
}

.test{
  width: 50rem;
  background: black;
  height:100px;
}

但是，尽管两个值都定义为 50rem，但结果是一个 500 像素宽的框，页面在 800 像素处变为红色。

https://jsfiddle.net/tstruyf/puqpwpfj/4/

我做错了什么或者为什么会这样？

【问题讨论】：

这是一个有趣的问题。但是，如果您想使用像素，只需直接使用它们即可。 em 和 rem 来自排版，我通常只将它们与字体一起使用，并且当我希望内容与文本保持比例时。
这是一个非常引人入胜的话题，我在努力使我的网站对更大/更小字体大小的偏好更加敏感。感谢您提出这个问题！

标签： css media-queries

【解决方案1】：

您没有做错任何事情，这就是媒体查询中的 rem 的工作方式。根据规范：

媒体查询中的相对单位基于初始值，即意味着单位从不基于声明的结果。为了例如，在 HTML 中，em 单位是相对于字体大小，由用户代理或用户偏好定义，不是页面上的任何样式。

因此，您应用于基本字体大小的任何样式都不会影响媒体查询计算。

Here's the relevant part of the spec.

如果你真的想使用 rem 并让他们使用 10px 的字体大小基础，你总是可以编写一个 SASS mixin 来为你做转换。除此之外，坚持使用 px 进行媒体查询可能不会那么混乱。

【讨论】：

所以 Safari 忽略了规范？因为查询在 Safari 中以 500px 工作
我认为是这样 - 也许他们认为他们的方法更有意义（我不得不说，我不明白为什么规范中会出现这种情况，似乎用例将被涵盖ems 已经）。
有关此错误报告的更多详细信息（以及规范为何采用这种方式的一些充分理由）：bugzilla.mozilla.org/show_bug.cgi?format=default&id=725879

【解决方案2】：

它本来就是这样工作的，如果你不知道发生了什么，那就有点混乱了。

如果您没有在媒体查询声明中使用rem，那么它们基于根 html 基本字体大小。如果您不声明这一点，那么在大多数现代网络浏览器中它是 16 像素。

正如您已将其声明为 10px ，在您的整个代码中，rem 将是 10px。与 em 单位不同，它基于最接近的父声明大小。

令人困惑的是，媒体查询声明并不基于您应用于html 的声明字体大小，而是始终使用默认大小——正如我所说，在几乎所有浏览器中都是 16px。

这就是为什么50rem 以800px - 16px * 50 出现的原因。

注意，这仅用于媒体查询断点的声明，如果您在媒体查询中指定 1rem 高，那么它将基于基本 html 大小。

html {
  font-size: 10px;
}

@media screen and (min-width: 50rem){ // 800px (uses base font-size)
  div.somediv {
    width: 50rem; // 500px (uses the declared html font-size)
  }
}

【讨论】：

【解决方案3】：

媒体查询中 1rem 的大小不受基本字体大小更改的影响。但是您可以自己计算正确的断点。您可以根据新的基本字体大小和所需的 rems 大小以像素为单位计算断点。

pixels = desired-rem-value * current-base-font-size

例如对于18px 的基本字体大小和20 "rem" 处的断点：

20 * 18px = 360px

如何计算像素值有几种选择：

1.手工计算：

html {
  font-size: 18px;
}

/* For a breakpoint at 20 times your base font size*/
@media(min-width: 360px) {
  ...
}

2。使用calc()：

@media(min-width: calc(20 * 18px)) {
  ...
}

3.使用 CSS 前置函数： （例如在 scss 或类似的东西中。）

$base-font-size: 18px;

html {
  font-size: $base-font-size;
}

@function media-rem($rem) {
  @return $rem * $base-font-size; // $rem must be unitless
}

@media(min-width: media-rem(20)) {
  ...
}

【讨论】：