@media

@media нужны для правильной работаты web aplication на всех устройствах

@media необходимо когда требуется применить разные css стили для:

• устройств с разными типами отображения:
  • @media screen { ... }
  • @media print { ... }
  • @media speech { ... }
  • @media only screen { ... }
  • @media screen, print { ... }
• с разными характеристиками устройства:
  • @media (color) { ... } // только для цветных экранов
  • @media (monochrome) { ... } // только для монохромных экранов
  • @media (aspect-ratio: 11/5) { ... } // для экранов с отношением сторон 11/5
  • @media (resolution: 150dpi) { ... } // для экранов со 150dpi
  • @media (orientation: landscape) { ... } // для горизонтального положения экрана смартфона
  • @media (orientation: portrait) { ... } // для вертикального положения экрана смартфона
  • @media (max-width: 960px) { ... } // для окна браузера с шириной меньше 960px
• с определенным набором характеристк:
  • and @media (min-width: 30rem) and (orientation: landscape) { ... }
  • , @media (min-width: 30rem) , screen and (orientation: landscape) { ... }
  • not @media not print, screen { ... } // не для печати, а для экранов Пример - просмотр печати с закоментированым и раскомментированным медиаправилом

Спецификация

Сыылка на спецификацию находится здесь

Анимация и переходы

Между свойствами в разных медиаправилах происходят переходы и анимация как и при обычных изменениях. Подробнее