@media нужны для правильной работаты web aplication на всех устройствах
@media (min-width: 30rem) and (orientation: landscape) { ...
}
@media (min-width: 30rem) , screen and (orientation:
landscape) { ... }
@media not print, screen { ... }
// не для печати, а для экранов
Пример - просмотр печати с закоментированым и
раскомментированным медиаправилом
Сыылка на спецификацию находится здесь
Между свойствами в разных медиаправилах происходят переходы и анимация как и при обычных изменениях. Подробнее