字体大小和设备像素比

Font-size and device-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"-sized...对吧？

@media ( min-resolution: 2dppx) {
    body, html {
        font-size: 50%;
    }
}

relevant jsFiddle

好吧，我发现它并没有像我想象的那样工作...我尝试 google 回答但没有找到任何相关的东西，我怀疑我误解了字体大小、ems 和像素密度的工作原理...

将字体大小减小 50% 可将字体大小减小一半以上。原来的大小是16px 但是font-size: 50%；结果字体比 font-size:8px 小得多……在 Firefox 和 Chrome 中测试。有谁知道这是为什么？
当我设置font-size: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% 规则适用于 <html> 标签和 <body> 标签。结果字体大小不是 body 中的 8px，而是 4px，因为 html 中的 50% 是 8px，而嵌套 body 标记中的另外 50% 导致 4px。

我打算做的是：

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

字体大小和设备像素比

Font-size and device-pixel-ratio

css

media-queries

pixel-ratio