Генератор медиа-запросов Viewport
Создавайте медиа-запросы CSS для адаптивного веб-дизайна.
Настройки медиа-запроса
Настройте условия медиа-запроса
Условие 1
Предустановки
Выберите часто используемые шаблоны медиа-запросов
Сгенерированный CSS
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}Общие точки останова
Мобильный:
max-width: 480pxПланшет:
481px - 768pxНастольный:
min-width: 1024pxБольшой настольный:
min-width: 1200pxРуководство по медиа-запросам
Ключевые функции носителя
- • width/height: ширина/высота области просмотра
- • min-width/max-width: условия минимальной/максимальной ширины
- • orientation: ориентация экрана (книжная/альбомная)
- • resolution: разрешение экрана (дисплеи retina и т. д.)
- • hover: поддержка возможности наведения курсора
- • pointer: точность указателя (сенсорный/мышь)
Советы по использованию
- • Подход Mobile First: используйте min-width для проектирования с маленьких экранов
- • Объединяйте сложные условия с помощью логических операторов
- • Используйте тип носителя print для отдельных стилей печати
- • Используйте resolution для поддержки дисплеев с высоким разрешением