代码之家 › 专栏 › 技术社区 › Blackbam

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

media-queries css3 html5 css

1

Blackbam · 技术社区 · 6 年前

总有一个盒子应该是绿色和红色的。

.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的浏览器,这两个框都是红色的,第二个媒体查询失败。但是,我希望浏览器在第一种不受支持的情况下,在第二种可能性上后退。你能帮我吗?

3 回复 | 直到 6 年前

1

BoltClock 6 年前

这有点棘手;因为当浏览器不支持特定媒体功能时,应用样式的唯一方法是 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>

2

1

Dave 6 年前

你可以使用 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。

3

0

Blackbam 6 年前

我通过在HTML上添加一些javascript和使用类(如modernizer)解决了这个问题,但作为一个无库解决方案:

(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的解决方案可能会更好。