Question

我有一个网站，其中媒体查询决定是否显示右侧列，具体取决于浏览器宽度。 CSS看起来像这样：

@media only screen and (max-width: 1152px) {
    #column_right {display:none}
}

最近，我在一个Windows框中测试了这个，其中DPI缩放设置为125％。显示器的分辨率设置为1024x768。所以从理论上讲，因为只有1024个CSS像素可用，我认为这与媒体查询相匹配。

但是，这不是发生的行为！看起来媒体查询看起来不是CSS像素，而是设备像素，其中有1280（1024 x 125％）。到目前为止，这只发生在Firefox中，因为Firefox使用Windows设置的设备像素比率，而所有其他浏览器（包括奇怪的Internet Explorer）使用的默认设备像素比率为1.0。我说这是IE的奇怪之处，因为如果有一个浏览器应该尊重Windows设置，那就是IE。

无论如何，为什么会这样，我将如何解决它？

Answer 1

如果屏幕分辨率低于某个宽度，您可以使用max-device-width隐藏列。

如果屏幕分辨率高达1024px，则下面的示例将触发display: none媒体查询。 1024px以上获得绿色div。

＆＃13;

div {
  background: #F00;
  width: 100px;
  height: 100px;
}
@media screen and (max-device-width: 1024px) {
  div {
    display: none;
  }
}
@media screen and (min-device-width: 1024px) {
  div {
    background: green;
  }
}

＆＃13;

<div></div>

＆＃13;

Firefox，Windows DPI缩放和CSS最大宽度媒体查询

1 个答案: