字体大小和设备像素比

Question

假设我将默认字体大小设置为16像素（这应该是多余的，因为它在大多数浏览器中都是默认值）:

为了简洁起见，我的网站包含一个大小为10em x 10em的框。

body，html 
{
    font-size: 16px;
}
.box {
    border: 1px绿色实线;
    背景颜色：绿色;
    宽度：10em;
    高度：10em;
}

我的网站已经响应式，使用min-width媒体查询针对em值的特定断点。

我的网站唯一要做的就是改变框的宽度和颜色。

@media (min-width:36em) {
  .box {
    width: 36em;
    border:1px红色实线;
    背景颜色：红色;
  }
}
@media (min-width:62em) {
    .box {
        width: 62em;
        border:1px蓝色实线;
        背景颜色：蓝色;
    }
}
@media (min-width:85em) {
    .box {
        width: 85em;
        border:1px橙色实线;
        背景颜色：橙色;
    }
}

现在假设我有一个分辨率为1440x900的设备，浏览器默认将该设备的像素密度设置为2dppx。结果是，所有内容看起来比实际要大得多。而我不喜欢这样。

但解决方案应该很简单，对吧？只需在开始时添加一个2dppx像素密度的媒体查询，由于它是两倍的像素，我只需将字体大小减半...应该可以解决问题，对吧？

而且，由于我在所有内容中都使用“em”，所以通过将字体大小减半，我自动将所有“em”大小的内容减半...对吧？

@media ( min-resolution: 2dppx) { body, html { font-size: 50%; } } 相关jsFiddle 嗯，我发现它并不像我想象的那样工作...我试图搜索答案，但没有找到任何相关的内容，我怀疑我误解了字体大小、em和像素密度的工作原理...

• 将字体大小减少50％会导致字体大小减小得比一半还要多。原始大小为16px，但font-size: 50％;的结果是比font-size:8px小得多... 在Firefox和Chrome中测试。有人知道为什么吗？

• 当我在2dppx的媒体查询中设置font-size：8px;时，min-width：36em，62em和85em的媒体查询不会按照我预期的触发，至少当我在Firefox中更改layout.css.devPixelsPerPx时是这样的。媒体查询中的min-width表现得像字体大小仍然是16px，尽管它已经随着dppx媒体查询的变化而改变。在Firefox和Chrome中测试。有人知道为什么吗？

更新

看起来媒体查询在1dppx上下文中加载，如果您使用“em”，则无论如何它似乎都会在加载时缓存，例如min-width等值被固定为第一个值，即使您在不同的媒体查询中更改基本字体大小，其他查询也不会刷新。

我现在能想到的唯一解决方案是将所有媒体查询乘以倍数。一个媒体查询用于1 dppx上下文中的px值，另一个媒体查询用于2 dppx上下文中的px值（即第一个值的50%）。

- Mirek

---

你为什么认为 font-size:50% 是 font-size:16px 的一半？它是父元素字体大小的一半。 - Mr Lister

无论如何，在更高的dppx下减小字体大小都不是一个好主意。这些屏幕具有更高的dppx，因为硬件点更小。如果您在2dppx屏幕上将字体大小设置为16个硬件点，它将与标准（96dpi）监视器上的8个像素相同大小，这实际上非常非常小。（对我们老年人来说确实如此。） - Mr Lister

父元素明确设置为16px（body，html），因此50％应等于8px。我打算仅针对特定分辨率减小大小，以针对使用更高像素密度的设备并导致页面变大的目标设备。我不知道除了针对具有特定分辨率的特定密度之外，还有其他解决此问题的方法。 - Mirek

不，那不是它的工作方式。如果默认字体大小为16px，而“html”设置为50％，则“html”的字体大小为8px。如果“body”作为“html”的子元素也设置为50％，则其字体大小变为4px。 - Mr Lister

@MrLister 谢谢，我没有注意到。它应该只是针对 HTML 标签的规则，而不是针对 body 的规则。 - Mirek

Answer 1

感谢评论区的Lister先生，我发现这段代码的作用不是我所期望的：

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

50%规则对于``标签和``标签都有效。因此，在body中得到的字体大小不是8px，而是4px，因为在html中50%是8px，在嵌套的body标签中再次使用50%结果是4px。

我的意图应该是：

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

字体大小问题已解决。

对于媒体查询：我发现@media查询中的尺寸忽略像素密度，但CSS规则中的尺寸不会。由于我使用“em”尺寸和SASS，可以简单地将所有@media查询替换为此mixin（以2dppx为例）：

@mixin media-min-width($min-width) { @media (min-width: $min-width), (min-width: $min-width/2) and (min-resolution: 2dppx) { @content; } }

- Mirek