Создание адаптивного меню

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 изменить отображение элементов меню на блочное шириной во всю страницу с помощью мадиа-запроса:

Далее следует настроить параметры форматирования по своему усмотрению.

Задание

домой назад