CSS中的if else语句？答案

【问题标题】：If else statements in CSS?CSS中的if else语句？
【发布时间】：2020-09-27 10:12:42
【问题描述】：

我知道这个问题听起来与this one 相似，但又有所不同。我在一个部分中有两篇文章，如果窗口宽度足够大，我想并排渲染它们，如果窗口宽度太小，我想在下面渲染它们。

第一篇文章的宽度始终为 800 像素，第二篇文章的宽度定义为其余的窗口宽度减去所有填充等。所以如果第二篇文章的计算宽度太小，我只想将其设置为更高的值，这会将第二篇文章置于第一篇文章之下。如果有其他编程语言中的 ifs，这应该不会太难。根据上面的问题，我为 if else 语句创建了这个演示代码，但它不起作用：

    @if 1 == 1 {
        border-color: #fff;
    }
    @else {
        border-color: #000;
    }

设置为1 == 2 应该触发else 部分仍然执行if 部分。那么我怎样才能得到真实的 if else 语句呢？

【问题讨论】：

我想你在找Media Queries
虽然你可以像阅读一大堆if语句一样阅读CSS，但CSS中没有if then else命令。然而，CSS 中有几种机制（我可能会添加许多可能性）可以用来模拟这样的命令。请发布一些 HTML/CSS 显示您希望如何实现这是一些布局，以便我可以为您的问题发布“泰勒制造”解决方案 minimal reproducible example。

标签： html css

【解决方案1】：

CSS 中没有真正的 if/else 语句，您可以使用媒体查询并根据窗口的宽度定义您的 css，如下所示：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

如果窗口小于 600px，则背景颜色设置为浅蓝色。您可以使用 min-width 和 max-width 等多个查询来定义您的 CSS。看看： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【讨论】：

注意：当想要在不同的屏幕宽度上有所不同时，这很有用，而不是在想要在不同的 div 大小宽度上有所不同时。
这是正确的，但这是您使用纯 css 的唯一机会，其他所有解决方案都涉及一个微小的 JavaScript
也对！（至少对于纯 CSS）。 stackoverflow.com/questions/1129699/…

【解决方案2】：

CSS 语句相互覆盖。所以如果你举这个例子：

body {
  background-color: green;
  background-color: red;
}

将导致背景呈红色，因为它是稍后定义的。

现在您可以将它与已经提到的媒体查询一起使用：

body { // your default case, if the condition is not met --> the else block
  background-color: green;
}
@media(min-width: 800px){ // here the condition is met --> if block
  body {
    background-color: red;
  }
}

提示：您可以使用 SCSS 使查询更具可读性。

【讨论】：