大家都知道CSS已经有@media、不香吗@support 查询形式的不香吗条件，可以非常灵活地选择对应的不香吗样式，然而还有一个新的不香吗提议叫做 when/else，这语法似乎看起来更加明了方便 在这篇文章完稿前，不香吗when[1] 的不香吗提议已经被 CSSWG 通过了，而 else[2] 是不香吗一个单独的提案，目前是不香吗一个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 还是不香吗需要稍微思考一下才知道是什么意思，然后有一个有意思的不香吗媒体查询写法也想在这里提一下，IT技术网它的语法感觉挺有意思的，而且特别易懂，写法如下： @media (width <= 800px) { /* 页面宽度小于等于800px时的样式 */ } 这样的语法是不是就特别清晰明了了？不过可惜的是它还是一个4级规范 总结这些提案进展得相当快，关于使用 @if 还是 @when 的问题也存在一些争议，怕 @if会与 Sass 冲突，还有一个建议是用 @where 来代替。总之不管叫啥名字，都是为了让CSS语法更丰富，期待！ b2b供应网 | 
喜欢
讨厌