CSS的when/else语法如何用，有哪些技巧

发布时间：2023-09-25 13:52:39 所属栏目：语言来源：

导读：关于“CSS的when/else语法如何用，有什么技巧”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友

关于“CSS的when/else语法如何用，有什么技巧”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

大家都知道CSS已经有@media、@support 查询形式的条件，可以非常灵活地选择对应的样式，然而还有一个新的提议叫做 when/else，这语法似乎看起来更加明了方便
在这篇文章完稿前，when 的提议已经被 CSSWG 通过了，而 else 是一个单独的提案，目前是一个4级规范

让我们来看看 when/else 是如何使用的吧

when/else 语法
先来看看为了实现页面响应式是如何做的，这就要用到 CSS媒体查询

@media (min-width: 800px) {
/* 宽度大于800px时的样式 */
}

@media (max-width: 799px) {
/* 宽度小于799px时的样式 */
}
而换成 when/else 后呢？

@when media(min-width: 800px) {
/* 宽度大于800px时的样式 */
}
@else {
/* 宽度不大于800px时的样式 */
}
语义上比 @media 更加好了

when/else 甚至还能支持多条件判断，跟写 if/else 似的

@when media(min-width: 800px) {
/* 宽度大于800px时的样式 */
}
@else media(min-width: 600px) {
/* 宽度大于600px但不大于800px时的样式 */
}
@else {
/* 宽度不大于600px时的样式 */
}
更多用法
一起来看看 when/else 有哪些不错的用法~

组合使用
再来举一个 @media 和 @support 共用的例子

@media (min-width: 800px) {
@supports (display: flex) {
.flex {
flex-direction: column;
}
}
}
这段代码的意思是当页面宽度大于 800px 并且浏览器支持 display: flex 语法时，给类名为 flex 的元素设置 flex-direction: column 的样式

其实不难理解，但要是换成 when/else 的语法会是啥样呢？

@when media(min-width: 800px) and supports(display: flex) {
.flex {
flex-direction: column;
}
}
内联使用
@when 也可以内联在CSS样式中使用，例如：

.button {
padding: 2rem;
@when element(max-width: 400px) {
padding: 1rem;
}
}
新的媒体查询写法
我在初学 @media 这个语法时也觉得有些拗口，min-width 和 max-width 还是需要稍微思考一下才知道是什么意思，然后有一个有意思的媒体查询写法也想在这里提一下，它的语法感觉挺有意思的，而且特别易懂，写法如下：

@media (width <= 800px) {
/* 页面宽度小于等于800px时的样式 */
}
这样的语法是不是就特别清晰明了了？不过可惜的是它还是一个4级规范。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!