5

假设我将默认字体大小设置为 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%；
    }
}

相关的jsFiddle

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

  • 将 font-size 减少 50% 会使 font-size 减少一半以上。原始大小为 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%）。

4

1 回答 1

1

感谢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) {
        @内容;
    }
}
于 2017-08-29T09:43:44.770 回答