css - 字体大小和设备像素比

我们说我的默认字体大小设置为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像素密度添加媒体查询，因为它的像素数是原来的两倍，我只需将字体大小缩小一半......这应该有效，对吗？

因为我使用＆＃34; em＆＃34;在一切然后通过将字体大小改为一半我自动减少一切的大小＆＃34; em＆＃34; - 缩小一半......对吗？

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

relevant jsFiddle

嗯，我发现它不起作用，因为我认为它...我试图google答案，但没有找到任何相关的，我怀疑我误解了字体大小，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中测试过。有谁知道为什么会这样？

更新

看起来媒体查询是在1dppx上下文中加载的，如果使用＆＃34; em＆＃34;无关紧要，似乎它们在加载时缓存，并且min-width等值固定为第一个值，如果您在不同的媒体查询中更改基本字体大小，则其他查询不会刷新。

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

感谢Lister先生的评论，我发现了这一点：

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

......不是我打算做的。 50％规则适用于<html>代码和<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;
    }
}

字体大小和设备像素比

1 个答案: