Медиавыражения. МДН
Медиавыражения в ЦСС — это наборы стилей, которые применяются при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя. Обычно в условии проверяют размер экрана:
Медиавыражения. МДН
@media (max-width: 960px) {
/* Стили ниже применятся на экране шириной до 960 пк */
.header {
/* … */
}
.catalog {
/* … */
}
}Недавно появился более наглядный и выразительный формат условий для проверки размеров экрана, с помощью операторов > и < вместо ключевых слов:
@media (max-width: 960px) {
/* Стили до ширины 960 пк */
}
@media (min-width: 960px) {
/* Стили от 961 */
}
@media (min-width: 480px) and (max-width: 960px) {
/* Стили в диапазоне 480—960 */
}
@media (max—height: 768px) {
/* Стили при высоте до 768 */
}
@media (width <= 960px) {
/* Стили до ширины 960 пк */
}
@media (width > 960px) {
/* Стили до 960 */
}
@media (480px <= width <= 960px) {
/* Стили в диапазоне 480—960 */
}
@media (height <= 768px) {
/* Стили при высоте до 768 */
}
Новый формат уже работает в большинстве браузеров, кроме устаревших версий.
А чтобы современный ЦСС работал и в старых браузерах, используйте транспайлер — программу для адаптации современного синтаксиса для старых браузеров. Например, CSSNext.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.