@support瀏覽器兼容判斷 以及 @media媒體查詢

@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;
    }
}