在根上更改字体大小不会影响@media 查询 [重复]答案

【问题标题】：Changing font-size on root doesn't affect @media queries [duplicate]在根上更改字体大小不会影响@media 查询 [重复]
【发布时间】：2017-07-15 03:32:13
【问题描述】：

我正在处理的页面有

html {
    font-size: 62.5%;
}

这意味着 1rem = 10px 而不是 1rem = 16px 到目前为止，非常好。

问题是它不会影响@media queries。

/*
it should change at 600px and not 960px.
the @media ignores the 62.5%;
*/
@media (min-width: 60rem) {
    .el {
        background: blue;
    }
}

检查此代码笔以查看问题。

http://codepen.io/sandrina-p/pen/bqGZjE

我在视网膜显示器上使用 Chrome 和 Firefox 进行了测试。在 Safari 上不会发生此问题。

有什么办法吗？

【问题讨论】：

它在 960px 上工作。在 Windows chrome 1920 分辨率下。我已将浏览器的大小调整为 960 像素，并且工作正常。
我希望它更改为 600px，而不是 960px，因为字体大小为 62.5%

标签： html css media-queries root font-size

【解决方案1】：

我发现了问题。在@media 中，您需要使用em，它将始终读取默认浏览器大小，而忽略您的自定义font-size。 rem 不会发生同样的情况。所以在这种情况下，您需要设置37.5em (600/16)，它会在包括 safari 在内的所有浏览器中更改 at 600px。

https://zellwk.com/blog/media-query-units/

(...) 唯一在所有四个浏览器中表现一致的单元是em。除了在 Safari 上发现的错误外，em 和 rem 之间没有任何区别。 (...) 不幸的是，像素媒体查询在第三个实验中保持在 400 像素，如果您打算支持更改浏览器字体大小值的用户，这将是不可行的。因此，经过这些实验，我的结论是：使用em 媒体查询。

@media screen and (max-width: 37.5em) {
    .el {
        background: blue;
    }
}

【讨论】：

是的，我也刚刚在 mac safari 媒体查询中发现使用 rem 只是没有反映和很好的研究 em 和 rem 真的很好。

【解决方案2】：

没有。它与您 html font-size 或您的 .el font-size 无关。因为 1rem 是 16px。所以你必须按照16px来计算。

@media (min-width: 37.5rem) {
    .el {
        background: blue;
    }
}

这将是您的 600 像素媒体查询中断。

【讨论】：

不，这样如果你在 safari 上打开 codepen，它将以 375px 而不是 600px 呈现，因为 safari 可以读取 62.5%。
我认为，您不应该使用 codepen 制作的代码来测试它。只需创建一个本地文件并添加元视口<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 并进行测试。

【解决方案3】：

试试这个

<div class="el">
    hey there
</div>

// =========== basic template =========== //
$safeArea: 1rem;
body {
    font-family: sans-serif;
}

// ======== actual codepen code ========= //

html {
    font-size: 62.5%;
}

.el {
    background: red;
    font-size: 1.6rem;
}

/* it should change at 600 px and not 960px.
the @media ignores the 62.5%;
*/
@media screen and (max-width: 60rem) {
    .el {
        background: blue;
    }
}

查看此代码笔 - http://codepen.io/anon/pen/aJbxOQ

【讨论】：

嗯，不，它仍然在 960px 变化，我想在 600px 变化它