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