@media适用于Chrome和Safari，但不适用于Firefox和IE

Question

我正在使用Bootstrap 4，但我需要一种更具体的移动风格，所以我创建了@media并且它在Firefox中不起作用。
为什么？

@media only screen and
       (max-width:768px) and
       (-webkit-min-device-pixel-ratio:0) and
       (orientation : portrait) {
}

它位于mobile.css。

Answer 1

因为您在-webkit-min-device-pixel-ratio:0规则中使用@media而冒险猜测 - Chrome和Safari都是基于Webkit的浏览器，而Firefox和Edge则不是，因此，他们会谨慎行事，而不是适用规则。

我完全从您的媒体查询中删除了该测试，说实话，MDN建议不要使用它（https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio）并且Firefox没有等效（https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-moz-device-pixel-ratio）