我可以以if / else方式使用@media吗?

时间:2013-07-14 10:59:44

标签: css media-queries

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

执行此操作

3 个答案:

答案 0 :(得分:41)

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

在您的情况下,媒体查询将为all and (min-width: 270px)。 (not需要media type才能正常工作;默认为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和一个重复的媒体查询。

答案 1 :(得分: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>

答案 2 :(得分:0)

这就是你实现这个场景的方法

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

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