css - 我可以以 if/else 的方式使用 @media 吗？

Question

我将此表单放在页面的页脚中（只有一个文本框和一个按钮）。我想尝试@media根据可用的视口宽度来应用它……例如，在我的情况下，这个表单的全宽需要大约 270px 左右。所以我想应用 CSS 来表示：

if the width available is at least 270px
     apply first set of CSS rules
else
     apply second set of CSS rules

我怎样才能做到这一点@media？

Answer 1

没有 if/else 语法@media，因此您需要在两个单独的@media规则中重复相同的媒体查询，并使用not其中一个来表示“else”。

在您的情况下，媒体查询将是all and (min-width: 270px). （你需要有一个媒体类型才能not工作；默认是all所以我只是使用它。）

您的 CSS 将如下所示：

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

@media not all and (min-width: 270px) {
    /* Apply second set of CSS rules */
}

---

@media我应该补充一点，一种流行的方法是通过仅使用一条规则来覆盖样式来利用级联：

/* Apply second set of CSS rules */

@media all and (min-width: 270px) {
    /* Apply first set of CSS rules */
}

但是，如果您在@media规则之外有任何未被（或不能）覆盖的样式，则此方法不足。这些样式将继续适用，除了实际重新声明它们之外，您无法撤消它们。有时您无法通过重新声明它们来撤消它们，那就是您无法使用此方法应用样式的时候。有关详细说明，请参阅我对这个问题的回答。

在此示例中，height: 200px声明将始终适用：

.example {
    width: 200px;
    height: 200px;
}

@media all and (min-width: 270px) {
    .example {
        width: 400px;
    }
}

当然，如果这不是问题，那么您可以使用它来避免重复媒体查询。但是如果你正在寻找一个严格的 if/else 结构，那么你将不得不使用not一个重复的媒体查询。

Answer 2

是的。通常从您的主 CSS 开始，然后根据宽度（或媒体类型）更改设计，并使用将覆盖任何以前的 CSS 的附加 CSS。

<style type=text/css">

/* the main css for the site */
.main-content {width:960px;}


/* the css adjustment for the site between two widths */
@media screen and (max-width:600px) and (min-width:271px) {
    .main-content {width:100%;}
}

/* the css adjustment for the site with a max-width of 270px */
@media screen and (max-width:270px) {
    .main-content {width:260px;}
}
</style>

Answer 3

这就是您实施该方案的方式

<style>
 // apply second set of CSS rules
@media (min-width: 270px) {
 // apply first set of CSS rules
}
</style>

在这种情况下，当满足媒体查询参数时，预先应用的 CSS 规则将被覆盖。