在CSS中使用when/else代码方法

本篇文章小编给大家分享一下在CSS中使用when/else代码方法，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

when/else 语法

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

css;">@media (min-) {
  /* 宽度大于800px时的样式 */
}

@media (max-) {
  /* 宽度小于799px时的样式 */
}

而换成when/else后呢？

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

语义上比@media更加好了

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

@when media(min-) {
  /* 宽度大于800px时的样式 */
}
@else media(min-) {
  /* 宽度大于600px但不大于800px时的样式 */
}
@else {
  /* 宽度不大于600px时的样式 */
}

更多用法

一起来看看when/else有哪些不错的用法~

组合使用

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

@media (min-) {
    @supports (display: flex) {
        .flex {
            flex-direction: column;
        }
    }
}

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

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

@when media(min-) and supports(display: flex) {
    .flex {
        flex-direction: column;
    }
}

内联使用

@when也可以内联在CSS样式中使用，例如：

.button {
  padding: 2rem;
  @when element(max-) {
    padding: 1rem;
  }
}

新的媒体查询写法

在初学@media这个语法时也觉得有些拗口，min-width和max-width还是需要稍微思考一下才知道是什么意思，然后有一个有意思的媒体查询写法也想在这里提一下，它的语法感觉挺有意思的，而且特别易懂，写法如下：

@media (width <= 800px) {
  /* 页面宽度小于等于800px时的样式 */
}

这样的语法是不是就特别清晰明了了？不过可惜的是它还是一个4级规范