Создайте веб-страницу.
Последнее обновление
27 апр. 2021 г.
Мультимедийные запросы используются для указания файлов CSS с учетом характеристик, о которых сообщают устройства (адаптивный дизайн). Браузер на устройстве проверяет мультимедийный запрос и использует соответствующий файл CSS, чтобы отобразить веб-страницу.
Например, следующий мультимедийный запрос указывает файл phone.css для устройств, ширина экрана которых составляет 300–320 пикселов.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
Подробное введение в медиазапросы см. в статье Дона Бута в Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Дополнительную информацию о медиазапросах W3C см. в www.w3.org/TR/css3-mediaqueries/.
Создание мультимедийного запроса
В Dreamweaver можно создать файл медиазапросов для всего сайта или медиазапрос для конкретного документа.
Файл медиазапросов для всего сайта
Задает настройки отображения для всех страниц сайта, которые включают файл.
Файл медиазапросов для всего сайта выступает в качестве центрального репозитория для всех медиазапросов на сайте.После создания этого файла добавьте ссылку на него со страниц сайта, которые должны использовать медиазапросы из файла для отображения.
Медиазапрос для конкретного документа
Медиазапрос вставляется непосредственно в документ, и страница отображается на основе вставленного медиазапроса.
Выберите «Изменить» > «Мультимедийные запросы».
Выполните одно из следующих действий.
Чтобы создать файл медиазапросов для всего сайта, выберите «Site Wide Media Queries File».
Чтобы создать мультимедийный запрос для данного документа, выберите «Этот документ».
Чтобы создать мультимедийный запрос для всего сайта, выполните следующие действия.
Нажмите кнопку «Указать».
Выберите «Создать новый файл».
Введите имя файла и нажмите кнопку «ОК».
Возможно, некоторые устройства не сообщают свою фактическую ширину.Чтобы заставить устройства сообщать их фактическую ширину, убедитесь, что включена опция «Force Devices To Report Actual Width».
При выборе этой опции в файл вставляется следующий код.
<meta name="viewport" content="width=device-width">
Выполните одно из действий, описанных ниже.
Нажмите «+», чтобы задать свойства для файла медиазапросов.
Нажмите «Default Presets», если хотите начать со стандартных предустановок.
Выберите строки в таблице и отредактируйте их свойства с помощью опций в разделе «Properties».
Описание
Описание устройства, для которого должен использоваться CSS-файл.Например, телефон, телевизор, планшет, и т. д.
Минимальная ширина и максимальная ширина
Файл CSS используется для устройств, ширина которых находится в рамках указанных значений.
Примечание
Оставьте поле «Мин. ширина» или «Макс. ширина» пустым, если задавать явный диапазон для устройства не требуется. Например, обычно поле «Мин. ширина» не заполняют, если задают параметр для телефонов, ширина экрана которых составляет не более 320 пикселов.
Файл CSS
Выберите «Use Existing File» и найдите CSS-файл для устройства.
Если вы хотите указать CSS-файл, который еще не создан, выберите «Create New File».Введите имя CSS-файла.После нажатия кнопки «OK» файл будет создан.
Нажмите кнопку «ОК».
Будет создан новый файл мультимедийного запроса для всего сайта. Сохраните его.
Медиазапрос для всего сайта: для существующих страниц убедитесь, что вы включили файл медиазапросов во все страницы в теге <head>.
Пример ссылки медиазапроса, где mediaquery_adobedotcom.css является файлом медиазапросов для всего сайта www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Использование существующего файла мультимедийного запроса
Создайте веб-страницу или откройте существующую страницу.
Выберите «Изменить» > «Мультимедийные запросы».
Выберите «Файл мультимедийного запроса для всего сайта».
Нажмите кнопку «Указать».
Выберите «Использовать существующий файл», если вы уже создали CSS-файл с медиазапросом.
Нажмите значок обзора, чтобы перейти к файлу и указать его. Нажмите кнопку «ОК».
Выберите «Файл мультимедийного запроса для всего сайта».
Чтобы заставить устройства сообщать их фактическую ширину, убедитесь, что опция «Заставить устройства сообщать фактическую ширину» включена.Следующий код вставляется в ваш файл при выборе этой опции.
<meta name="viewport" content="width=device-width">
Нажмите кнопку «ОК».
Выберите другой общий для сайта файл медиазапросов
Используйте эту процедуру для изменения общего для сайта файла медиазапросов, который вы настроили в диалоговом окне «Медиазапросы».
Выберите «Веб-сайт» > «Управление веб-сайтами».
В диалоговом окне «Управление веб-сайтами» выберите требуемый сайт.
Нажмите кнопку «Изменить». Откроется диалоговое окно «Настройка сайта».
В разделе «Дополнительные параметры» в левой панели выберите «Местные данные».
В области «Site-Wide Media Query File» на правой панели нажмите кнопку «Browse» , чтобы выбрать CSS-файл медиазапроса.
Примечание
Изменение общего для сайта файла медиазапросов не влияет на документы, связанные с другим или предыдущим общим файлом медиазапросов сайта.
Нажмите кнопку «Сохранить».
Просмотр веб-страниц на основе медиазапроса
Размеры, указанные в медиазапросе, отображаются в параметрах размера кнопки/окна Multiscreen.При выборе размера из меню видны следующие изменения:
Размер просмотра изменяется с учетом выбранных параметров. Размер рамки документа остается неизменным.
CSS-файл, указанный в медиазапросе, используется для отображения страницы.
Связанные материалы
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
