CSS中support, media各自的含義及用法

support

CSS中的@support主要是用于檢測浏覽器是否支援CSS的某個屬性，其實就是條件判斷，如果支援某個屬性，你可以寫一套樣式，如果不支援某個屬性，你也可以提供另外一套樣式作為替補。但是這裡有一點需要注意的是：@support對于浏覽器的版本也是有要求的，不是說所有的浏覽器以及其所有的版本都是支援@support的

基本文法

@supports (display: flex) { div { display: flex; }} //如果浏覽器支援display:flex屬性的話，那麼div的樣式就是display:flex
           

@supports not (display: flex) { div { float: right; }}//如果浏覽器不支援display:flex屬性的話，那麼div的樣式就是display:right
           

邏輯運算

@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { /*自己的樣式 */ } 
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) { /*自己的樣式 */ }
           

or”和“and”混用，在@supports中“or”和“and”混用時，必須使用括号（）來區分其優先級

media

@media 可以針對不同的螢幕尺寸設定不同的樣式，特别是如果你需要設定設計響應式的頁面

@media 是非常有用的。當你重置浏覽器大小的過程中，頁面也會根據浏覽器的寬度和高度重新渲染頁面。

文法：

@media mediatype and | not | only (media feature) { css-code; }
//也可以針對不同的媒體使用不同的stylesheets: 
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">