时间戳

首页 > 解决方案 > CSS中的if else语句？

html - CSS中的if else语句？

问题描述

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

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

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

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

标签： htmlcss

解决方案

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

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

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

推荐阅读