when else用法,when_else语句

目录

　　 when/else语法更多用法组合使用Inline使用新媒体查询编写摘要大家都知道CSS已经具备了@media和@support查询表单的条件，可以灵活选择相应的样式。不过有一个新的提议叫when/else，似乎更清晰更方便。

　　在这篇文章完成之前，when的提案已经被CSSWG采用，而else是一个单独的提案，目前是4级规范。

　　我们来看看when/else是怎么用的。

when/else 语法

　　我们先来看看如何实现页面响应，这就需要CSS媒体查询。

　　@ media(min-width:800 px){/* Style当宽度大于800 px */} @ media(max-width:799 px){/* Style当宽度小于799 px */} when/else呢？

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

　　When/else甚至可以支持多条件判断，就像写if/else一样。

　　@when media(最小宽度：800px) {/* Style when width大于800px */} @ Elsemedia(最小宽度：600px) {/* Style when width大于600px但不大于800px */}@else {/* Style when width不大于600px */}

更多用法

　　来看看when/else的一些好用法吧~

组合使用

　　再举一个@媒体和@支持分享的例子。

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

　　其实不难理解，但是when/else的语法会是什么样子呢？

　　@当媒体(最小宽度：800px)和支持(显示：flex) {。flex { flex-方向：列；}}

内联使用

　　 @when也可以在CSS样式中内联使用，例如：button { padding:2 rem；@ when element(max-width:400 px){ padding:1 rem；}}

新的媒体查询写法

　　刚学@media的语法时，感觉有点卡壳。最小宽度和最大宽度在我知道它们是什么意思之前还需要想一想。然后还有一个有趣的媒体查询的写法我也想在这里提一下。它的语法感觉挺有意思的，特别好理解。它是这样写的：

　　@media (width=800px) {/* Style当页面宽度小于等于800px */}这个语法是不是特别清楚？遗憾的是，它仍然是4级规范。

　　字体这些提案进展得相当快。也有一些关于是否使用“如果”或“当”的争议，因为担心“如果”会与Sass冲突。另一个建议是用@where代替。无论如何，不管名字是什么，都是为了丰富CSS语法。我很期待！

　　关于用css写when/else的体验这篇文章就到这里了。有关CSS中when/else的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。