CSS中@support的用法 及其calc、media用法

背景： 一次偶然的機會遇到一個朋友在刷css的庫其中有這樣一道題（css變量如何定義，calc, support, media），我看一眼熟悉而陌生，知其一而不知其二，叔可忍嬸不可忍，馬上就度娘起來，看一看它的真面目。

一 support

了解到了@support的這個屬性，記錄下：
CSS中的@support主要是用於檢測瀏覽器是否支持CSS的某個屬性，其實就是條件判斷，如果支持某個屬性，你可以寫一套樣式，如果不支持某個屬性，你也可以提供另外一套樣式作為替補。但是這里有一點需要注意的是：@support對於瀏覽器的版本也是有要求的，不是說所有的瀏覽器以及其所有的版本都是支持@support的。
下面就來說一下@support的用法：
1.基本語法是這樣的：

@support(prop:value){
/*自己的樣式*/
}
@supports (display: flex) { div { display: flex; }}

注釋：如果瀏覽器支持display:flex屬性的話，那么div的樣式就是display:flex

2.邏輯操作符：“not” 的用法

@supports not (display: flex) { div { float: right; }}

注釋：如果瀏覽器不支持display:flex屬性的話，那么div的樣式就是display:right

3.邏輯操作符：“and”的用法

@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
/*自己的樣式*/
}

注釋：如果瀏覽器支持display:flex和box-shadow的屬性，就執行里面自己的樣式

4.邏輯操作符：“or” 的用法

@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
/*自己的樣式 */
}

注釋：如果瀏覽器支持其中一個就可以執行里面自己的樣式

5.混用的例子
“or”和“and”混用，在@supports中“or”和“and”混用時，必須使用括號（）來區分其優先級

@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” 和 “not” 混用

@supports (display: grid) and (not (transition-property: color) or (animation-name: foo)){
/*自己的樣式 */
}

二 calc

定義與用法

calc() 函數用於動態計算長度值。

     ● 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；

     ● 任何長度值都可以使用calc()函數進行計算；

     ● calc()函數支持 "+", "-", "*", "/" 運算；

     ● calc()函數使用標准的數學運算優先級規則；

CSS 語法

calc(expression)

值	描述
expression	必須，一個數學表達式，結果將采用運算后的返回值

width: calc(100% - 80px);

注： calc兼容見 https://www.cnblogs.com/gaoht/p/11021876.html

二 media

定義和使用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

CSS 語法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

實例

使用 @media 查詢來制作響應式設計：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

---------------------
參考文章： 

https://blog.csdn.net/liaobangxiang/article/details/80706922

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

https://www.runoob.com/cssref/css3-pr-mediaquery.html