Могу ли я использовать @media в режиме if/else?

У меня есть эта форма, размещенная в нижнем колонтитуле моей страницы (есть только одно текстовое поле и одна кнопка). Я хочу попробовать и применить к нему @media, основываясь на доступной ширине видимости... Так, например, в моем случае полная ширина этой формы составляет около 270 пикселей или около того. Поэтому я хочу применить CSS, чтобы сказать, что:

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

Как это сделать, используя @media?

Ответ 1

Нет синтаксиса if/else для @media, поэтому вам нужно будет повторить один и тот же медиа-запрос в двух разных правилах @media и использовать not, для одного из них означает "else".

В вашем случае запрос на медиа будет all and (min-width: 270px). (Для работы нужно <@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 и дублированный медиа-запрос.

Ответ 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>

Ответ 3

Вот как вы могли бы реализовать этот сценарий

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

В этой ситуации правила CSS, примененные заранее, будут перезаписаны, когда будет удовлетворен аргумент медиа-запроса.