时间戳

首页 > 解决方案 > @media 适用于 Chrome 和 Safari，但不适用于 Firefox 和 IE

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

问题描述

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

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

它位于mobile.css.

标签： cssfirefoxmedia

解决方案

冒险猜测这是因为您-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）

推荐阅读