При создании сайтов с адаптивной вёрсткой приходится пользоваться инструкциями @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) { } |
