Exogens
О компании Контакты Клиенты Новости Форум

CSS @media

38159 | 1

При создании сайтов с адаптивной вёрсткой приходится пользоваться инструкциями @media, которые помогают определять параметры устройства и в зависимости от них использовать те или иные стили. Наш CSS-тестер показывает наглядным образом, какие инструкции @media действуют на данном устройстве. Достаточно просто зайти на страницу теста с нужного устройства.


  • all
  • print
  • screen
  • speech
Тип устройства

@media all { }@media print { }@media screen { }@media speech { }@media handheld { }@media projection { }@media tty { }@media tv { }
  • landscape
  • portrait
Ориентация экрана

@media (orientation: landscape) { }@media (orientation: portrait) { }
  • 640
  • 800
  • 1024
  • 1280
  • 1366
  • 1440
  • 1600
  • 1920
Ширина устройства

@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) { }Фактическая ширина:
  • 640
  • 800
  • 1024
  • 1280
  • 1366
  • 1440
  • 1600
  • 1920
Ширина области просмотра

@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) { }
  • 480
  • 600
  • 720
  • 768
  • 900
  • 1080
  • 1200
Высота устройства

@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) { }Фактическая высота:
  • 480
  • 600
  • 720
  • 768
  • 900
  • 1080
  • 1200
Высота области просмотра

@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) { }
  • 1.333
  • 1.777
  • 1.778
Соотношение сторон

@media (device-aspect-ratio: 1600/1200) { }@media (device-aspect-ratio: 1600/900) { }@media (device-aspect-ratio: 1366/768) { }
  • 8 бит
  • 16 бит
  • 24 бита
  • 32 бита
Цветность

@media (min-color: 255) { }@media (min-color: 65535) { }@media (min-color: 16777215) { }@media (min-color: 4294967295) { }
  • 36dpi
  • 50dpi
  • 72dpi
  • 96dpi
  • 100dpi
  • 120dpi
  • 125dpi
  • 150dpi
  • 160dpi
  • 200dpi
  • 240dpi
  • 300dpi
  • 600dpi
Разрешение

@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) { }
  • none
  • initial-only
  • enabled
Поддержка скриптов

@media (scripting: none) { }


Пригодились наши инструменты?
Подписывайтесь vk.com/exogens!
Расскажите о нас!

Мы поддержим

Техподдержка | Контакты | Форум
О компании | Отзывы | Блог
Карта сайта | На главную

Мы предлагаем создание сайтов в Новосибирске под ключ на нашей CMS Ruen, их обслуживание и сопутствующие рекламные услуги.

Сайт работает на CMS RUEN

www.webmoney.ru

Блог

31Март
2017
Показываем объявления Яндекс Директ
15Июнь
2016
Правильный адрес сайта
31Май
2016
Обновление нашего бесплатного инструмента
12Май
2016
Эксперимент по статистике сайта
18Март
2016
Создание и разработка сайтов
1Март
2016
Вход рубль, выход – два
18Февраль
2016
Мобильная версия по Яндексу vs. Pluso.ru
8Февраль
2016
Простейшее А/Б тестирование
© Exogens, 2003-2017ИП Богданович К.П.   ИНН 5403345261   ОГРИП 305540427600039   WM аттестован