大家都知道CSS已经有了@media和@support查询形式的条件，你可以很灵活的选择对应的样式。但是，有一个名为when/else的新提案。这种语法似乎更加清晰和方便。这篇文章完结之前，when[1]的提案已经被CSSWG通过，而else[2]则是一个单独的提案，目前是level4规范。我们来看看when/else是怎么使用的。when/else语法首先出现。看如何实现页面响应，需要CSS媒体查询@media(min-width:800px){/*宽度大于800px时的样式*/}@media(max-width:799px){/*当宽度大于800px时的样式宽度小于799px*/}那when/else呢？@whenmedia(min-width:800px){/*宽度大于800px时的样式*/}@else{/*宽度不大于800px时的样式*/}语义比@mediawhen/else甚至可以支持多条件判断，比如写if/else@whenmedia(min-width:800px){/*width大于800px时的样式*/}@elsemedia(min-width:600px){/*width大于600px但大于800px时不Style*/}@else{/*宽度不大于600px时的Style*/}更多用法，一起来看看when/else的好用法~结合使用并让我们使用@media和@support来分享示例@media(min-width:800px){@supports(display:flex){.flex{flex-direction:column;}}}这段代码意味着当页面宽度为大于800px且浏览器支持display:flex从语法上来说，类名flex的元素设置flex-direction:column的样式不难理解，但是如果换成什么时候/其他语法？@whenmedia(min-width:800px)andsupports(display:flex){.flex{flex-direction:column;}}内联使用@when也可以在CSS样式中内联使用，例如：.button{padding:2rem;@whenelement(max-width:400px){padding:1rem;}}mediaquery的新写法我刚学@media的语法的时候也觉得有点别扭。min-width和max-width还是需要稍微想一下就知道了。什么意思，然后还有一种有趣的写媒体查询的方式，我想在这里提一下。它的语法感觉很有趣，而且特别容易理解。写法是这样的：@media(width<=800px){/*页面宽度小于等于800px*/}的语法有这么清晰明了吗？不幸的是，它仍然是4级规范。这些提议进展得相当快。对于是使用@if还是@when，也存在一些争议。恐怕@if会与Sass冲突。另一个建议是改用@where。总之，不管叫什么名字，都是为了让CSS语法更加丰富，期待！
