java font 像素_字体大小和设备像素比

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

为简洁起见，我的网站包含一些尺寸为10em x 10em的盒子 .

body, html

{

font-size: 16px;

}

.box {

border: 1px green solid;

background-color:green;

width:10em;

height:10em;

}

对于针对em值(36,62和85em)的特定断点，我的网站已经对 min-width 媒体查询做出了响应 .

我的网站唯一做的就是改变盒子的宽度和颜色 .

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

}

}

好吧，我发现它不起作用，因为我认为它...我试图谷歌的答案，但没有找到任何相关的，我怀疑我误解了字体大小，ems和像素密度的工作原理...

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

当我设置font-size：8px;在媒体查询2dppx然后媒体查询min-width：36em，62em和85em不会像我预期的那样触发，至少当我在Firefox中更改layout.css.devPixelsPerPx时 . 媒体查询中的最小宽度行为类似于字体大小仍为16px，尽管它已使用dppx媒体查询进行了更改 . 在Firefox和Chrome中测试过 . 有谁知道为什么会这样？

UPDATE

看起来媒体查询是在1dppx上下文中加载的，如果你使用“em”并不重要，它们似乎是在加载时缓存的，而min-width等值固定为第一个值，尽管你改变了基本的字体大小在不同的媒体查询中，其他查询不刷新 .

我现在能想到的唯一解决方案是增加所有媒体查询 . 1 dppx上下文中的px值的一个媒体查询和2 dppx上下文中的px值的另一个媒体查询(其为第一值的50％) .