calc, support, media各自的含义及用法？

最新推荐文章于 2025-08-01 10:15:50 发布

静安好

最新推荐文章于 2025-08-01 10:15:50 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_38611537/article/details/110201247

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS中的@supports特性来检测浏览器对特定CSS属性的支持情况，并提供了逻辑操作符的使用示例。此外，还讲解了如何利用calc()函数进行动态长度计算以及@media查询实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@support

CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，**你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。**但是这里有一点需要注意的是：@support对于浏览器的版本也是有要求的，不是说所有的浏览器以及其所有的版本都是支持@support的。
1.逻辑操作符：“not” 的用法

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

注释：如果浏览器不支持display:flex属性的话，那么div的样式就是display:right
2.逻辑操作符：“and”的用法

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

注释：如果浏览器支持display:flex和box-shadow的属性，就执行里面自己的样式
3.逻辑操作符：“or” 的用法

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

注释：如果浏览器支持其中一个就可以执行里面自己的样式
4.混用的例子
“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() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；

#accessory {
    border: 8px solid #B8C172;
    float: right;
    padding: 10px;
    width: 208px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(25% - 10px );
    width: -webkit-calc(25% - 10px );
    width: calc(25% - 10px );
}

media

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}