@support浏览器兼容判断 以及 @media媒体查询

Posted 2020-10-29 赵大树

@support和@media是两个使用方法相同但功能完全不同的css特性。

@support是用于检测当前浏览器对css属性或属性值的支持情况，即浏览器兼容性的判断。

@media则是一种媒体查询的手段，通过media可以对不同类型或尺寸的显示设备设置不同的展示效果。

 

@support

由于浏览器种类版本繁多以及其他方面的问题，很多css属性可能会在不同浏览器中显示不同的效果甚至没有效果。所以浏览器的兼容一直是令人头疼的问题，可能要使用大量辅助代码比如css hack来写出对应不同浏览器的代码。

不过support可以判断浏览器对css属性的支持情况，然后编写相应的代码来尽量实现统一的效果。

使用方法：

#demo {
  //对所有浏览器统一设置浮动  
  float: left;    
}

@support (display: flex) {
  //如果当前浏览器支持flex布局就设置为flex布局
  #demo {
    display: flex;
  }    
}

support还可以通过and or来支持css不同属性之间的关系嵌套查询

@support (display: -webkit-flex or //chorme and safari
          display: -moz-flex or  //firefox
          display: -o-flex or //opera
          display: -ms-flex or //ie
          display: flex) {
  //如果当前浏览器支持flex布局就设置为flex布局
  #demo {
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    display: flex;
    float: none;
  }    
}

 

@media

 

media可以根据显示设备媒体尺寸的不同，展示不同的效果，从而做到响应式的设计。比如在屏幕尺寸小于640px的时候让字体颜色为蓝色，大于640px的时候为绿色。

而且，还可以通过它判断媒体设备的种类来作出相应样式显示。例如"font-size"属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体。

使用方法：

//基本格式
@media not/only mediatype and (expressions) {
  css node;
}

mediatype是媒体类型，包括screen(手机电脑)、print(打印机打印预览)和all(所有设备)。

expressions是媒体功能，主要就是关于设备屏幕尺寸的设定比如min/max-width、min/max-height等，这里用法和support的属性判断类似也可以使用and or等嵌套使用。

@media only screen and (max-width: 500px and max-height: 500px) {
    .demo {
        color: green;
    }
}