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))) { /*自己的样式 */ }

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

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">