Я разрабатываю страницу с использованием мультимедийных запросов CSS3, используя первый подход для мобильных устройств, что означает, что я начинаю с малого и работаю.
Но теперь я столкнулся с проблемой: как бороться с "стильным кровотечением" для классов видимости?
Позвольте мне объяснить, что я имею в виду - когда мой первый медиа-запрос выглядит так:
@media only screen and (min-width: 20em) {
// Styles here
}
Эти стили не применяются к экранам размером менее 20 мкм. На самом деле это не проблема, потому что стили, которые не обернуты в медиа-запросе, в основном являются первым медиа-запросом (надеюсь, вы понимаете, что я имею в виду).
Но теперь я хочу ввести классы видимости, чтобы скрыть элементы для определенных размеров экрана. Проблема в том, что эти стили в основном унаследованы. Видеть:
@media only screen and (min-width: 20em) {
.hidden-first {
display: none;
}
}
Любой элемент со hidden-first
классом hidden-first
как только экран будет шириной 20 или более ширины. Но я хочу только скрыть элемент, пока активен медиа-запрос.
Как мне это сделать - есть ли способ сбросить стиль внутри другого медиа-запроса?
Я предлагаю создать такой класс, как hide-for-medium
и создать правило для его display:none !important;
Взгляните на структуру Фонда и посмотрите, как это сделать. Я думаю, это лучший способ справиться с этой ситуацией.