Mir*_*rek 5 css media-queries pixel-ratio
假设我将默认字体大小设置为16px(这应该是多余的,因为它在大多数浏览器中是默认的):
为简洁起见,我的网站包含一些尺寸为10em x 10em的盒子.
body, html
{
font-size: 16px;
}
.box {
border: 1px green solid;
background-color:green;
width:10em;
height:10em;
}
我的网站已min-width针对针对em值(36,62和85em)的特定断点的媒体查询做出响应.
我的网站唯一做的就是改变盒子的宽度和颜色.
@media (min-width:36em) {
.box {
width: 36em;
border:1px red solid;
background-color:red;
}
}
@media (min-width:62em) {
.box {
width: 62em;
border:1px blue solid;
background-color:blue;
}
}
@media (min-width:85em) {
.box {
width: 85em;
border:1px orange solid;
background-color:orange;
}
}
现在让我们说我有一些分辨率为1440x900的设备,其中浏览器默认情况下设备的像素密度为2dppx.结果,一切看起来都比应有的大.我不喜欢它.
但解决方案应该很简单,对吧？只需在开始时为2dppx像素密度添加媒体查询,因为它是像素的两倍,我只是将字体大小减半...这应该有效,对吧？
因为我在所有东西上使用"em"然后通过将字体大小改为一半来自动减少所有"em"大小的大小......对吧？
@media ( min-resolution: 2dppx) {
body, html {
font-size: 50%;
}
}
好吧,我发现它不起作用,因为我认为它...我试图谷歌的答案,但没有找到任何相关的,我怀疑我误解了字体大小,ems和像素密度的工作原理...
将字体大小减少50%会使字体大小减少一半以上.原始大小为16像素,但字体大小:50%; 导致字体比font-size小得多:8px ...在Firefox和Chrome中测试.有谁知道为什么会这样？
当我设置font-size:8px; 在媒体查询2dppx然后媒体查询min-width:36em,62em和85em不会像我预期的那样触发,至少当我在Firefox中更改layout.css.devPixelsPerPx时.媒体查询中的最小宽度行为类似于字体大小仍为16px,尽管它已使用dppx媒体查询进行了更改.在Firefox和Chrome中测试过.有谁知道为什么会这样？
UPDATE
看起来媒体查询是在1dppx上下文中加载的,如果你使用"em"并不重要,它们似乎是在加载时缓存的,而min-width等值固定为第一个值,尽管你改变了基本的字体大小在不同的媒体查询中,其他查询不刷新.
我现在能想到的唯一解决方案是增加所有媒体查询.1 dppx上下文中的px值的一个媒体查询和2 dppx上下文中的px值的另一个媒体查询(其为第一值的50%).
感谢李斯特先生的评论，我发现：
@media（最小分辨率：2dppx）{
正文，html {
字体大小：50%；
}
}
……这不是我想要做的。50% 规则适用于<html>标签和标签<body>。最终的 body 字体大小不是 8px，而是 4px，因为 html 中的 50% 是 8px，嵌套 body 标记中的另外 50% 是 4px。
我本来想做的是这样的：
@media（最小分辨率：2dppx）{
html{
字体大小：50%；
}
}
字体大小问题已解决。
对于媒体查询：我发现 @media 查询中的大小忽略像素密度，但 CSS 规则主体中的大小不会。由于我使用“em”大小和 SASS，我可以简单地用这个 mixin 替换所有 @media 查询（例如 2dppx）：
@mixin 媒体最小宽度（$最小宽度）{
@media（最小宽度：$最小宽度），（最小宽度：$最小宽度/ 2）和（最小分辨率：2dppx）{
@内容;
}
}