При создании сайтов с адаптивной вёрсткой приходится пользоваться инструкциями @media, которые помогают определять параметры устройства и в зависимости от них использовать те или иные стили. Наш CSS-тестер показывает наглядным образом, какие инструкции @media действуют на данном устройстве. Достаточно просто зайти на страницу теста с нужного устройства.
| Тип устройства@media all { } @media print { } @media screen { } @media speech { } @media handheld { } @media projection { } @media tty { } @media tv { } |
---|---|
| Ориентация экрана@media (orientation: landscape) { } @media (orientation: portrait) { } |
| Ширина устройства@media (min-width: 640px) { } @media (min-width: 800px) { } @media (min-width: 1024px) { } @media (min-width: 1280px) { } @media (min-width: 1366px) { } @media (min-width: 1440px) { } @media (min-width: 1600px) { } @media (min-width: 1920px) { } Фактическая ширина: |
| Ширина области просмотра@media (min-width: 640px) { } @media (min-width: 800px) { } @media (min-width: 1024px) { } @media (min-width: 1280px) { } @media (min-width: 1366px) { } @media (min-width: 1440px) { } @media (min-width: 1600px) { } @media (min-width: 1920px) { } |
| Высота устройства@media (device-height: 480px) { } @media (device-height: 600px) { } @media (device-height: 720px) { } @media (device-height: 768px) { } @media (device-height: 900px) { } @media (device-height: 1080px) { } @media (device-height: 1200px) { } Фактическая высота: |
| Высота области просмотра@media (min-height: 480px) { } @media (min-height: 600px) { } @media (min-height: 720px) { } @media (min-height: 768px) { } @media (min-height: 900px) { } @media (min-height: 1080px) { } @media (min-height: 1200px) { } |
| Соотношение сторон@media (device-aspect-ratio: 1600/1200) { } @media (device-aspect-ratio: 1600/900) { } @media (device-aspect-ratio: 1366/768) { } |
| Цветность@media (min-color: 255) { } @media (min-color: 65535) { } @media (min-color: 16777215) { } @media (min-color: 4294967295) { } |
| Разрешение@media (resolution: 36dpi) { } @media (resolution: 50dpi) { } @media (resolution: 72dpi) { } @media (resolution: 96dpi) { } @media (resolution: 100dpi) { } @media (resolution: 125dpi) { } @media (resolution: 150dpi) { } @media (resolution: 200dpi) { } @media (resolution: 300dpi) { } @media (resolution: 600dpi) { } |
| Поддержка скриптов@media (scripting: none) { } |