我可以以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>