Нажмите полосу визуального медиа-запроса, соответствующую медиа-запросу, который хотите отредактировать.
Последнее обновление
20 дек. 2021 г.
Используйте визуальные медиазапросы для просмотра и редактирования веб-страниц в различные ключевые моменты, соответствующие различным размерам экрана.
Медиазапросы — это модуль CSS3, который позволяет создавать интерактивные веб-сайты, используя различные правила стилей для разных устройств или типов носителей. На основе этих правил контент отображается с учетом различных условий, таких как размеры экрана, размеры окна браузера, размеры устройства и ориентация, а также разрешение.
Вы можете добавлять медиазапросы в CSS, используя правило @media. Или вы можете создать отдельные таблицы стилей для различных типов носителей и затем вызвать их, используя следующий синтаксис:
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
Браузер на устройстве проверяет мультимедийный запрос и использует соответствующий файл CSS, чтобы отобразить веб-страницу.
Дополнительные сведения см. в этой статье.
Можно добавлять медиазапросы путем вставки соответствующего кода в файлы HTML или CSS. Кроме того, Dreamweaver позволяет легко создавать медиазапросы и управлять ими с помощью:
Основное отличие между этими методами — визуальный аспект. Если вы предпочитаете писать код и просматривать изменения в режиме интерактивного просмотра, используйте конструктор CSS. Если же нужно визуализировать страницу в различных контрольных точках и одновременно вносить изменения в ее дизайн, то лучше подойдут визуальные медиазапросы.Панели визуального медиазапроса
Панели визуального медиазапроса — это визуальное представление медиазапросов, имеющихся на странице. Они помогают визуализировать веб-страницу в нескольких точках останова и просматривать компоненты страницы в различных областях просмотра. При изучении страницы в нескольких областях просмотра вы можете вносить изменения для определенной области. При этом дизайн страницы в других областях останется прежним.
Визуальный медиазапрос состоит из трех панелей в виде горизонтальных строк, каждая из которых представляет категорию медиазапроса.
Зеленый: медиазапросы с условиями max-width
Синий : медиазапросы с условиями min-width и max-width
Фиолетовый : медиазапросы с условиями min-width
Медиазапросы, перечисленные на панели CSS Designer, также помечены этими цветами.
Каждая категория может состоять из одного или нескольких медиазапросов. Если условие медиазапроса в документе не определено, то соответствующая панель визуального медиазапроса также не отображается. Например, если документ не содержит условий min-width, то фиолетовая полоса не отображается.
Значения контрольных точек указаны на полосах — min-width слева и max-width справа от полосы.
A. Контрольные точки B. Панели визуального медиазапроса C. Значок добавления медиазапроса D. Метка прокрутки
Скрыть или показать визуальные медиазапросы
Панель визуальных медиазапросов отображается по умолчанию в режиме интерактивного просмотра. Чтобы скрыть панель, используйте переключатель «Панель визуальных медиазапросов» на панели инструментов.
Переключение между точками останова
Для просмотра страницы определенного размера (контрольной точки) щелкните по соответствующей панели медиазапроса. Документ привяжется к точке останова.
Кроме того, вы можете перетащить ползунок к нужной точке останова.
Чтобы изменить размер представления до размера окна документа Dreamweaver, выполните одно из следующих действий:
- Дважды щелкните по любому месту серой области в правой части документа, где будет отображен текст «Дважды щелкните для выравнивания по ширине». Если вы не видите серую область, перетащите ползунок влево.
- Выберите параметр «Полная ширина» в раскрывающемся списке в нижней части окна документа.
Если вы не видите этот параметр, перетащите ползунок, чтобы уменьшить размер веб-страницы.
Визуальное редактирование медиазапросов
Появятся элементы управления размером. Для медиа-запросов, имеющих значения как min, так и max-width, маркеры изменения размера появляются с обеих сторон полосы.
Перетащите маркеры до требуемого размера.
Новые значения минимальной и максимальной ширины будут автоматически применены к медиазапросам. Отображается уведомление о том, что медиазапрос успешно изменен. Если панели визуального медиазапроса соответствуют несколько медиазапросов, обновляются все медиазапросы. Количество обновленных медиа-запросов отображается вместе с сообщением об успешном выполнении.
Для отмены нажмите Ctrl+Z (Win) или Cmd+Z (Mac).
Также можно дважды нажать на значения точек останова, чтобы ввести значения с клавиатуры.
Добавить новые медиа-запросы
Перетащите ползунок вдоль линейки до требуемого размера.
Щелкните 
.
Во всплывающем окне по умолчанию выбрана максимальная ширина. Чтобы задать min-width или min-max, выберите соответствующий параметр в раскрывающемся списке и выберите требуемые единицы измерения.
Затем выберите источник CSS, в который необходимо добавить медиа-запрос.
Если вы решили создать новый CSS-файл, появится другое всплывающее окно. Укажите имя и путь нового файла CSS и нажмите кнопку «ОК».
Для отмены нажмите Ctrl+Z (Win) или Cmd+Z (Mac).
Удалить медиа-запросы
Щелкните правой кнопкой мыши по соответствующей полосе визуального медиа-запроса.
Нажмите «Удалить», а затем выберите медиа-запрос, который хотите удалить.
Нажмите «ОК», чтобы подтвердить удаление всех медиа-запросов и связанных селекторов.
Для отмены нажмите Ctrl+Z (Win) или Cmd+Z (Mac).
Просмотреть код медиа-запросов
Щелкните правой кнопкой мыши по требуемой полосе визуального медиа-запроса и наведите указатель мыши на пункт «Перейти к коду».
Появится список всех медиа-запросов в данном диапазоне точек останова вместе с файлами, в которых они объявлены.
Нажмите требуемый медиа-запрос для перехода к соответствующему коду в представлении кода.
Если представление кода не отображается, документ переключается в разделенное представление для отображения кода.
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
