Question

始终其中一个框应为绿色，另一个应为红色。

.elem {
  width:200px;
  height:200px;
  background-color:#911;
  margin:20px;
}

/* If at least 300px wide and the device is able to hover */
@media (min-width: 300px) and (hover: hover) {
    #carl {
       background-color:#191;
   } 
}

/* If maximum 300px wide OR the the device is not able to hover */
@media (max-width: 300px), (hover: none) {
    #dude {
       background-color:#191;
   } 
}

/* Try the exact opposite of the first media query also fails */
@media not all and (min-width: 300px, "bigheader")) and (hover: hover) { 
    #dude {
       background-color:#191;
   } 
}

<div id="carl" class="elem"></div>
<div id="dude" class="elem"></div>

基本上，第二个媒体查询所做的与第一个媒体查询完全相反。不幸的是，这仅适用于支持CSS4媒体交互功能媒体查询的浏览器。

对于不支持IE 11的浏览器，两个框均为红色，第二个媒体查询失败。但是，如果不支持第一种可能性，我希望浏览器退回到第二种可能性。你能帮我吗？

Answer 1

这有点棘手；由于在浏览器不支持特定媒体功能时应用样式的唯一方法是通过taking advantage of the cascade，因此，您将需要完全在@media规则之外应用后备样式。不幸的是，确实要花一些钱来复制一些样式：

.elem {
  width:200px;
  height:200px;
  background-color:#911;
  margin:20px;
}

/* If maximum 300px wide OR the the device is not able to hover */
#dude {
  background-color:#191;
}

/* If at least 300px wide and the device is able to hover */
@media (min-width: 300px) and (hover: hover) {
  #carl {
    background-color:#191;
  }
  #dude {
    background-color:#911;
  }
}

<div id="carl" class="elem"></div>
<div id="dude" class="elem"></div>

Answer 2

您可以使用Modernizr来确定浏览器是否支持悬浮媒体查询。如果是这样，它将把hovermq类放在<html>上。您可以围绕此类是否存在来进行媒体查询。

此外，您可能不想将最小宽度和最大宽度都设置为300px，因为在该宽度下，两种媒体查询的样式都将被应用。您可以像这样形成它们：

...
/* If at least 300px wide and the device is able to hover */
@media (min-width: 300px) and (hover: hover) {
    #carl {
       background-color:#191;
   } 
}

/* If maximum 300px wide OR the the device is not able to hover */
@media (max-width: 299px), (hover: none) {
    #dude {
       background-color:#191;
   } 
}

我将最大宽度媒体查询更改为299px。

Answer 3

我通过添加一些JavaScript并像Modernizr一样在HTML上使用类来解决了这个问题，但是作为一个无库解决方案：

(function($) {

    r2oBodySizeClasses()
    r2oBodyInteractionClasses();


    $(window).resize(function() {
       r2oBodySizeClasses();
    });

    function r2oBodySizeClasses() {
        if($(window).width() < 960) {
            $('html').removeClass('client-bigheader').addClass('client-smallheader');
        } else {
            $('html').removeClass('client-smallheader').addClass('client-bigheader');
        }

        if($(window).width() >= 1216) {
            $('html').removeClass('client-screen-small client-screen-medium').addClass('client-screen-large');
        } else if($(window).width() >= 640) {
            $('html').removeClass('client-screen-small client-screen-large').addClass('client-screen-medium');
        } else {
            $('html').removeClass('client-screen-medium client-screen-large').addClass('client-screen-small');
        }
    }

    function r2oBodyInteractionClasses() {
        $('html').removeClass("client-hover client-hover-none client-hover-unknown");
        if(window.matchMedia("(hover: hover)").matches || ((navigator.userAgent.search("Firefox") > -1) && screen.width >= 960 )) {
            $('html').addClass("client-hover");
        } else if(window.matchMedia("(hover: none)").matches) {
            $('html').addClass("client-hover-none");
        } else {
            $('html').addClass("client-hover-unknown");
        }
    }

}) (jQuery);

仍然只有CSS解决方案会更好。

如何处理CSS媒体查询否定（包括不支持它的浏览器）？

3 个答案: