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;
    }
}

检查此codepen以查看问题。

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

我在视网膜显示器上使用Chrome和Firefox进行了测试。在Safari上，这个问题并没有发生。

任何解决方案？

Answer 1

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

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

（...）唯一在所有四种浏览器中执行的单位是em。除了在Safari上发现的错误之外，em和rem之间没有任何差异。（...）不幸的是，在第三个实验中，px媒体查询仍然保持在400px，如果您打算支持更改浏览器字体大小值的用户，这将使其成为禁忌。因此，我在这些实验后得出的结论是：使用em媒体查询。

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

Answer 2

没有。它不必对您html font-size或您的.el font-size执行任何操作。因为1rem是16px。所以你必须根据16px来计算它。

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

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

Answer 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

在root上更改字体大小不会影响@media查询

3 个答案: