Ответ 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 и дублированный медиа-запрос.