Создание адаптивного меню
Media queries (медиа-запросы) — часть спецификации CSS3, позволяющая уточнить область действия css-селектора. Представляет собой блок с указанием параметров устройства вывода, таких как: тип, разрешение, ориентация в пространстве. Разработчики могут использовать эти параметры при настройке сайтов для просмотра на различных устройствах — телефонах, планшетах, мониторах. Media queries не поддерживаются в браузере Internet Explorer версии 8 и ниже.
Синтаксис
Например, следующее правило задает стиль для всех устройств кроме принтера (список типов устройств вывода приведен в лабораторной работе № 14).
Медиа-функции задают параметры устройства вывода веб-документа. Стиль будет применяться в том случае, если функция возвращает значение истина.
| Медиа-функция | Назначение |
| orientation | Альбомная (landscape) или книжная (portrait) ориентация устройства.
В данном примере стиль будет применяться в случае альбомной ориентации устройства: |
| width, min-width, max-width | Ширина окна браузера или печатной страницы.
В данном примере стиль будет применяться в случае, если ширина окна браузера меньше или равна 480px: |
| height, min-height, max-height | Высота окна браузера или печатной страницы.
В данном примере стиль будет применяться в случае, если высота окна браузера превышает или равна 900px: |
| device-width, min-device-width, max-device-width | Ширина экрана устройства или печатной страницы.
В данном примере стиль будет применяться в случае, если ширина экрана устройства равна 480px: |
| device-height, min-device-height, max-device-height | Высота экрана устройства или печатной страницы.
В данном примере стиль будет применяться в случае, если высота экрана устройства равна 768px: |
Для того, чтобы при заданных условиях применялся стиль из определенного файла стилей, следует при подключении связанного стиля указать значение атрибута media тега link:
Создание адаптивного навигационного меню c использованием media queries
Следует создать простое горизонтальное меню (аналогичное задание в лабораторной работе № 6).
При ширине окна браузера менее или равной 600px изменить отображение элементов меню на блочное шириной во всю страницу с помощью мадиа-запроса:
Далее следует настроить параметры форматирования по своему усмотрению.
Задание
- Создайте страницу с тремя блоками. Блоки должны окрашиваться в определенные цвета при изменении ширины окна браузера.
- Создайте простое горизонтальное меню, которое при уменьшении ширины окна браузера превращается в выпадающее меню.
