我可以以 if/else 的方式使用 @media 吗？答案

【问题标题】：Can I use @media in an if/else kind of way?我可以以 if/else 的方式使用 @media 吗？
【发布时间】：2013-07-12 09:45:08
【问题描述】：

我将此表单放在页面的页脚（只有一个文本框和一个按钮）。我想尝试根据可用的视口宽度将@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 做到这一点？

【问题讨论】：

标签： css media-queries

【解决方案1】：

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

在您的情况下，媒体查询将是 all and (min-width: 270px)。（你需要有一个media type 才能使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 规则之外有任何样式在其中没有（或不能）被覆盖，那么这将不够用。这些样式将继续适用，除了实际重新声明它们之外，您无法撤消它们。有时您无法通过重新声明它们来撤消它们，此时您就无法使用此方法应用样式。详细解释见我对this question的回复。

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

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

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

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

【讨论】：

@Ahmad：是的，你可以。
从技术上讲，您的答案在这里是正确的，但似乎我的实际问题仍未 100% 解决。我感觉你在 CSS 方面很有经验，所以也请看这里：stackoverflow.com/questions/17640057/…
@BoltClock 你知道同样的逻辑是否适用于链接头标签吗？因为我在使用这种奇特的方法时遇到了一些问题......
@TechNyquist：是的，<link media="..."> 接受媒体查询，所以理论上你可以使用not 技术做同样的事情。
@BoltClock 确实有效。我只是打错了。谢谢。

【解决方案2】：

这就是你实现该场景的方式

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

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

【讨论】：

【解决方案3】：

是的。通常从您的主 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>

【讨论】：