假设我将默认字体大小设置为 16px（这应该是多余的，因为它在大多数浏览器中都是默认的）：
为简洁起见，我的网站包含一些大小为 10em x 10em 的盒子。
body, html
{
font-size: 16px;
}
.box {
border: 1px green solid;
background-color:green;
width:10em;
height:10em;
}
我的网站已经响应了针对 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%;
}
}
相关jsFiddle
好吧，我发现它不像我想象的那样工作......我试图谷歌答案，但没有找到任何相关的东西，我怀疑我误解了字体大小、ems 和像素密度的工作原理......
>
将字体大小减小 50% 会使字体大小减少一半以上。原始大小为 16px，但字体大小：50%;导致字体远小于字体大小：8px ...在Firefox和Chrome中测试过。有谁知道这是为什么？
当我设置字体大小:8px在针对2dppx的媒体查询中，针对min-width:36em、62em和85em的媒体查询没有像我预期的那样触发，至少当我在Firefox中更改layout.css.devPixelsPerPx时没有触发。媒体查询中的最小宽度表现为字体大小仍然为16px，尽管它随dppx媒体查询而改变。在Firefox和Chrome中测试。有人知道为什么吗？
更新
看起来媒体查询是在 1dppx 上下文中加载的，是否使用“em”并不重要，似乎它们在加载时被缓存并且最小宽度等值固定为第一个值，即使您在不同的媒体查询中更改了基本字体大小，其他查询也不会刷新。
我现在能想到的唯一解决方案是将所有媒体查询乘以。一个媒体查询 1 dppx 上下文中的 px 值，另一个媒体查询 2 dppx 上下文中的 px 值（第一个值的 50%）。
感谢李斯特先生的评论，我发现这一点:
@media ( min-resolution: 2dppx) {
body, html {
font-size: 50%;
}
}
…不是我想做的。50%规则适用于
我想做的是:
@media ( min-resolution: 2dppx) {
html {
font-size: 50%;
}
}
字体大小问题已解决。
对于媒体查询：我发现@media查询中的大小会忽略像素密度，但CSS规则正文中的大小不会。由于我使用“em”大小和SASS，我可以简单地用这个mixin替换所有@media查询（例如2dppx）：
@mixin media-min-width($min-width) {
@media(min-width:$min-width), (min-width: $min-width / 2) and (min-resolution: 2dppx) {
@content;
}
}
