更改根上的字体大小不会影响@media 查询

Question

我正在使用

的页面

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 上不会发生此问题。

有什么解决办法吗？

Answer 1

试试这个

<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

Answer 2

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

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

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

Answer 3

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

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

(...) the only unit that performed consistently across all four browsers is em. There aren’t any differences between em and rem with the exception of bugs found on Safari. (...) Unfortunately, px media queries remained at 400px in the third experiment, which makes it a no-go if you intend to support users who change their browser’s font-size value. Hence, my conclusion after these experiments is: Use em media queries.

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

更改根上的字体大小不会影响@media 查询

Changing font-size on root doesn't affect @media queries

html

css

root

font-size

media-queries