@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

可能会造成危险，这是因为您在@media规则中使用了-webkit-min-device-pixel-ratio:0 -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 ）没有任何替代品