css - FF 中的媒体查询问题和响应式视图工具

Question

我遇到了媒体查询问题。我正在使用 Firefox 中的响应式视图工具以 480 像素的分辨率查看我的网站。但它似乎以 430 像素而不是 480 像素发射。我不知道为什么。

/*
 *  Gird layout for devices above 480px.
 */
@media screen and (min-width: 480px) {
html {
    background: red;
}
}

我没有其他代码或媒体查询，所以我想知道这是否是某种错误。

截屏：

在此处输入图像描述

score 2 · Accepted Answer

你不会相信这一点，我发布这个以防有人碰巧有同样的问题。

在某些时候，我使用（CMD 和 - 在 Mac 上）使我的浏览器文本变小了。它打破了正确的宽度，但因为我的字体较小，它让我失望了。它实际上在正确的位置中断，但响应式查看器没有根据我的字体大小显示宽度。

score 1 · Accepted Answer

如果html在将响应工具设置为 480 后检查元素的计算宽度，您将获得 465 的值。overflow: hidden;在html元素上设置然后再次检查，您将获得 480。

Firefox 在计算视口宽度时会考虑滚动条的宽度，而 Chrome 会覆盖滚动条。

score 1 · Accepted Answer

1

检查你的缩放，如果你放大了，宽度将被关闭。ctrl+0 将缩放重置为默认 100%

于 2015-05-28T17:49:41.783 回答

3 回答 3