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

CSS @media

220 | 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!
58AB0
Расскажите о нас!

Мы поддержим

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

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

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

www.webmoney.ru

Блог

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