css 样式条件判断
时间: 2023-11-03 15:05:33 浏览: 45
CSS样式条件判断可以通过@supports和@media规则来实现。其中,@supports规则主要用于判断浏览器是否支持某个CSS属性或属性值,从而实现渐进增强式设计。而@media规则则主要用于根据媒体属性区分样式表,特别是在响应式设计中发挥着重要作用。此外,三元运算符也可以用于多条件判断,例如在背景色中使用三元运算符来判断不同的条件并设置不同的颜色值。
举个例子,如果我们想要在不同的浏览器中设置不同的样式,可以使用@supports规则来判断浏览器是否支持某个属性或属性值,然后设置相应的样式。例如:
```
@supports (display: flex) {
.container {
display: flex;
}
}
@supports not (display: flex) {
.container {
display: table;
}
}
```
这段代码中,如果浏览器支持flex布局,则设置.container的display属性为flex;否则,设置为table布局。
另外,如果我们想要在不同的媒体设备上设置不同的样式,可以使用@media规则来实现。例如:
```
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
@media print {
.container {
width: 50%;
}
}
```
这段代码中,如果屏幕宽度小于768px,则设置.container的宽度为100%;否则,在打印时设置为50%。