Как создать медиа-запрос в Dreamweaver

Как создать медиа-запрос в Dreamweaver - манекены

Медиа-запрос идентифицирует носитель (печать, экран, карманное устройство и т. д.) и отображает страницу HTML с таблицей стилей CSS на основе этого носителя. Так, например, если страница открыта на мобильном устройстве Android, она будет отображаться с более узким контейнером, подходящим для телефона, и более высокой контрастной цветовой схемой, хорошо работающей на солнечном свете.

С созданием и сохранением ваших альтернативных файлов CSS просмотрите HTML-страницу, с которой они будут связаны в окне многоэкранного предварительного просмотра. Чтобы создать медиа-запрос в Dreamweaver, выполните следующие действия:

1Нажмите кнопку «Запросы мультимедиа».

Откроется диалоговое окно Media Queries.

2В области «Запросы записи в медиа» выберите «Этот документ» (чтобы определить медиа-запрос для открытого документа).

Чтобы сгенерировать файл медиа-запросов Sitewide, который можно применить к другим страницам вашего сайта Dreamweaver, выберите параметр «Фильтр запросов к сайту», затем нажмите кнопку «Определить», чтобы перейти к папке и имени файла для этой цели.

3Щелкните флажок Принудительные устройства для указания фактической ширины.

Вставляется специальный тег, который дает более точные значения ширины из запрошенных носителей.

4Нажмите «+» для создания первого медиа-запроса. В поле «Описание» введите комментарий, напоминающий вам, для чего предназначен этот запрос (например, ноутбуки, планшеты, мобильные устройства и т. Д.).

Например, если вы определяете стиль, который будет использоваться на настольных компьютерах и ноутбуках, вы можете описать его как Настольные компьютеры и ноутбуки.

5Чтобы определить минимальную ширину для медиа-запроса, введите значение в поле Minimum Width.

Хорошая минимальная ширина для полноэкранных макетов составляет 960 пикселей.

6Щелкните кнопку Использовать существующий файл и перейдите к файлу CSS, который вы хотите использовать в полноразмерных браузерах.

Этот рисунок иллюстрирует этот первый заданный медиа-запрос.

7 Определите, по крайней мере, один дополнительный медиа-запрос, повторив шаги 4-6.

Например, если у вас есть файл CSS для планшетов и смартфонов, сделайте этот второй вариант и определите максимальную ширину 959 пикселей.

8Щелкните OK в диалоговом окне «Запросы мультимедиа».

Вы возвращаетесь в окно многоэкранного просмотра, где вы можете увидеть, как будет выглядеть ваша страница в устройствах, для которых вы определили медиа-запрос.