字体大小和设备像素比(Font

字体大小和设备像素比(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”大小的一半 - 大小减半......对吗？

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

相关的jsFiddle

那么我发现它不工作，因为我认为它会...我试图谷歌的答案，但没有发现任何相关的，我怀疑我误解如何字体大小，EMS和像素密度工程...

将字体大小减少50％，字体大小减少了一半以上。 原始大小是16px，但字体大小：50％; 导致比font-size：8px小得多的字体...在Firefox和Chrome中测试。 有谁知道这是为什么？

当我设置字体大小：8px; 在2dppx的媒体查询中，最小宽度的媒体查询：36em，62em和85em不会像我预期的那样触发，至少当我更改Firefox中的layout.css.devPixelsPerPx时。 媒体查询中的最小宽度的行为就像字体大小仍然在16px，尽管它随dppx媒体查询而改变。 经过Firefox和Chrome测试。 有谁知道这是为什么？

UPDATE

看起来媒体查询在1dppx上下文中加载，如果使用“em”，则无关紧要，似乎它们在加载时缓存，而最小宽度等值固定为第一个值，并且即使您更改了基本字体大小在不同的媒体查询中，其他查询不会刷新。

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

Let's say that I have default font size set to 16px (this should be redundant since it's default in most browsers):

For brevity, my site contains some box with size 10em x 10em.

body, html { font-size: 16px; } .box { border: 1px green solid; background-color:green; width:10em; height:10em; }

My site is already responsive with min-width media queries for specific breakpoints targetted at em values (36, 62 and 85em).

The only thing my site does is change width and color of the box.

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

Now let's say that I have some device with resolution 1440x900 where browsers decide that the device's pixel density is 2dppx by default. As result, everything looks much bigger than it should be. And I don't like it.

But the solution should be easy, right? Just add a media query at start for 2dppx pixel density and since it's twice as much pixels, I just reduce the font size by half...that should work, right?

And since I use "em" on everything then by changing the font-size by half I automatically reduce size of everything "em"-sized by half...right?

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

relevant jsFiddle

Well I found it does not work as I thought it would...I tried to google answers but did not find anything relevant, I suspect I misunderstand how font-sizes, ems and pixel density works...

Reducing font-size by 50% reduces the font-size by much more than by half. The original size is 16px but font-size: 50%; results in a font much smaller than font-size:8px ... Tested in Firefox and Chrome. Does anyone know why is that?

When I set font-size:8px; in the media query for 2dppx then media queries for min-width:36em, 62em and 85em do not trigger as I would have expected, at least when I change layout.css.devPixelsPerPx in Firefox. The min-width in media query behaves like the font-size is still at 16px eventhough it's changed with the dppx media query. Tested in Firefox and Chrome. Does anyone know why is that?

UPDATE

Looks like media queries are loaded in 1dppx context, it does not matter if you use "em", it seems they are cached on load and values such as min-width are fixed to the first value and eventhough you change the base font-size in different media query, other queries don't refresh.

The only solution I can think of right now is to multiply all media queries. One media query for px value in 1 dppx context and another media query for px value in 2 dppx context (which is 50% of the first value).

最满意答案

感谢李斯特先生的评论，我发现这一点：

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

...不是我想要做的。 50％规则适用于<html>标记AND <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; } }

Thanks to Mr Lister in comments, I found out that this:

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

...is not what I intended to do. The 50% rule works for <html> tag AND for <body> tag. The resulting font size is not 8px in body, but 4px, because 50% in html is 8px and another 50% in nested body tag results in 4px.

What I intended to do was this:

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

Font-size issue is solved.

For the media query: I found out that sizes in @media queries ignore pixel density but sizes in the CSS rule body do not. Since I use "em" sizes and SASS, I can simply replace all @media queries with this mixin (example with 2dppx):

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