Question

在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，但结果是一个500px宽的框，页面变为800px的红色。

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

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

Answer 1

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

媒体查询中的相对单位基于初始值，即意味着单位永远不会基于声明的结果。对于例如，在HTML中，em单位是相对于初始值的 font-size，由用户代理或用户的首选项定义，而不是页面上的任何样式。

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

Here's the relevant part of the spec.

如果你真的想使用rem并让它们使用10px的字体大小，你可以随时写一个SASS mixin来为你做转换。除此之外，坚持使用px进行媒体查询可能不那么令人困惑。

Answer 2

它的工作原理是这样，如果您不知道发生了什么，这只会使您感到困惑。

如果您不在媒体查询声明中使用rem，则它们基于html根字体的基本字体大小。如果您未声明，则在大多数现代的网络浏览器中为16px。

正如您将其声明为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)
  }
}

Answer 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)) {
  ...
}

在媒体查询中使用rem单位并使用宽度

3 个答案: