字体大小和设备像素比答案

【问题标题】：Font-size and device-pixel-ratio字体大小和设备像素比
【发布时间】：2018-02-03 14:52:03
【问题描述】：

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

为简洁起见，我的网站包含一些大小为 10em x 10em 的盒子。

正文，html { 字体大小：16px； } 。盒子 { 边框：1px 绿色实心；背景颜色：绿色；宽度：10em；高度：10em； }

我的网站已经通过min-width 媒体查询响应针对 em 值（36、62 和 85em）的特定断点。

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

@media（最小宽度：36em）{ 。盒子 { 宽度：36em；边框：1px 红色实心；背景颜色：红色； } } @media（最小宽度：62em）{ 。盒子 { 宽度：62em；边框：1px 蓝色纯色；背景颜色：蓝色； } } @media（最小宽度：85em）{ 。盒子 { 宽度：85em；边框：1px 橙色实心；背景颜色：橙色； } }

现在假设我有一些分辨率为 1440x900 的设备，其中浏览器决定设备的像素密度默认为 2dppx。结果，一切看起来都比应有的大得多。而且我不喜欢它。

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

由于我在所有内容上都使用“em”，然后通过将字体大小更改一半，我会自动将所有“em”大小的内容缩小一半......对吗？

@media（最小分辨率：2dppx）{ 正文，html { 字体大小：50%； } }

relevant jsFiddle

好吧，我发现它不像我想象的那样工作......我试图用谷歌搜索答案，但没有找到任何相关的东西，我怀疑我误解了字体大小、ems 和像素密度的工作原理......

将字体大小减少 50% 会使字体大小减少一半以上。原始大小为 16px 但 font-size: 50%;导致字体比 font-size:8px 小得多......在 Firefox 和 Chrome 中测试。有谁知道这是为什么？
当我设置 font-size:8px;在 2dppx 的媒体查询中，min-width:36em、62em 和 85em 的媒体查询不会像我预期的那样触发，至少当我在 Firefox 中更改 layout.css.devPixelsPerPx 时。媒体查询中的 min-width 的行为就像 font-size 仍然为 16px，尽管它随着 dppx 媒体查询而改变。在 Firefox 和 Chrome 中测试。有谁知道这是为什么？

更新

看起来媒体查询是在 1dppx 上下文中加载的，如果您使用“em”并不重要，似乎它们在加载时被缓存，并且诸如 min-width 之类的值固定为第一个值，即使您更改了基数不同媒体查询中的字体大小，其他查询不刷新。

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

【问题讨论】：

为什么你认为font-size:50% 是font-size:16px 的一半？它是 父字体大小 的一半。
无论如何，在较高的 dppxs 下减小字体大小并不是一个好主意。这些屏幕具有更高的 dppx，因为硬件点更小。如果您在 2dppx 屏幕上将字体大小设置为 16 个硬件点，那么在标准 (96dpi) 显示器上的大小将与 8 像素相同，这真的非常很小。（反正对我们这些老家伙来说。）
父级显式设置为 16px (body,html)，因此 50% 应该等于 8px。而且我打算仅针对特定分辨率减小尺寸，以针对那些无缘无故使用更高像素密度并且结果页面更大的目标设备。除了以特定分辨率定位特定密度之外，我不知道如何解决此问题。
不不，它不是这样工作的。如果默认字体大小为 16px，html 设置为 50%，则 html 的字体大小为 8px。如果body 是html 的子级，也设置为50%，则其字体大小变为4px。
@MrLister 谢谢，我没有注意到。它应该是仅适用于 html 标记的规则，而不适用于正文。

标签： css media-queries pixel-ratio

【解决方案1】：

感谢 cmets 的 Lister 先生，我发现：

@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(min-width:$min-width), (min-width: $min-width / 2) 和 (min-resolution: 2dppx) { @内容; } }

【讨论】：