更改字体大小不影响@media查询
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上,问题不会发生。
任何解决方案?
我发现了这个问题。 在@media
中,您需要使用em
,它会始终读取默认浏览器大小,忽略您的自定义font-size
。 rem
也不会发生这种情况。 因此,在这种情况下,您需要设置37.5em
(600/16),并且它会在包括safari在内的每个浏览器中将600px更改为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;
}
}
是的,我也只是在mac safari媒体查询中发现了使用'rem'只是没有反映和'em'和'rem'好的研究真的很好。 – locateganesh
试试这个
<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;
}
}
看到这个codepen - http://codepen.io/anon/pen/aJbxOQ
嗯,nop,它仍然在960px更改,我想改变它在600px –
不是,它不会与你html
font-size
或您.el
font-size
做任何事情。因为1rem是16px。所以你必须按照16px来计算它。
@media (min-width: 37.5rem) {
.el {
background: blue;
}
}
这将是您的600px媒体查询中断。
Nop,这样,如果你打开safari上的codepen,它将渲染375px而不是600px,因为safari可以读取62.5%。 –
我想,你不应该用codepen制作的代码来测试它。只需创建一个本地文件并添加元视口''并测试它。 – locateganesh
它正在处理960px。在Windows铬1920年决议。我已将浏览器大小调整为960像素,并且正常工作。 – locateganesh
我希望它改变在600px,而不是960px,因为字体大小是62.5% –