Як створити користувацькі медіа-запити в Dreamweaver

Коли ви створюєте сторінки за допомогою функцій плавної сітки, Dreamweaver автоматично створює для вас відповідні медіа-запити, але ви можете створювати власні медіа-запити та використовувати їх для націлювання на власні правила CSS.

Медіа-запити використовуються в Інтернеті більше десяти років для інших цілей, наприклад створення альтернативного дизайну сторінки, оптимізованого для друку. Медіа-запит складається з медіа-типу, такого як екран або друк (два найпоширеніших), і необов’язкового виразу, який перевіряє певні характеристики, такі як висота або ширина. Найбільш часто використовувані типи медіа

• all: підходить для всіх пристроїв

• print: призначений для попереднього перегляду друку та для відображення під час друку сторінки

• екран: для вмісту, що відображається на будь-якому екрані

Тип портативного медіа більше майже ніколи не використовується, і найкраще його використовувати лише для мобільних телефонів та інших пристроїв з невеликими екранами, обмеженою пропускною здатністю та монохромними дисплеями, які підтримують лише растровую графіку. Пристрої iOS і більшість смартфонів класифікуються як типи екранних медіа.

Як застосувати стилі до дизайну сторінки Dreamweaver

Ви можете застосувати таблиці стилів як зовнішні файли, зв’язавши їх або імпортуючи їх, або включити їх як внутрішні стилі в область заголовка HTML-коду сторінки. Ви навіть можете націлюватися на пристрої, використовуючи вбудовані стилі — зручний варіант, якщо ви хочете застосувати конкретне правило лише до певних пристроїв.

Ви можете використовувати комбінацію цих параметрів, а також імпортувати або зв’язувати кілька зовнішніх таблиць стилів на одній веб-сторінці. Після того, як ви визначили тип медіа з медіа-функціями, на які ви хочете націлити, ви вказуєте, як стилі мають застосовуватися до сторінки.

Як використовувати медіа-запити у зовнішніх таблицях стилів у Dreamweaver

Ви можете використовувати медіа-запити із зовнішніми таблицями стилів двома способами. Перший варіант — посилання на одну зовнішню таблицю стилів з кількома наборами стилів, розділених медіа-запитами. Ось як Dreamweaver пов’язує стилі, коли ви створюєте плавний макет сітки.

Другий варіант — зв’язати дві або більше окремих зовнішніх таблиць стилів до кожної HTML-сторінки та включити медіа-запити до кожної таблиці стилів. У будь-якому випадку, код для CSS і HTML зберігаються в окремих файлах, і

тег з'єднує їх.

Незалежно від того, зберігаєте ви всі медіа-запити та пов’язані стилі в одному файлі чи в окремих файлах CSS, ви також можете зв’язати додаткові таблиці стилів з будь-якою сторінкою HTML. Наприклад, ви можете включити окремий набір стилів в окрему таблицю стилів, яка призначена для форматування сторінки, коли вона надсилається на принтер.

Як створити медіа-запити в Dreamweaver

Ви можете створювати скільки завгодно медіа-запитів у Dreamweaver, і ви можете включити їх в один файл CSS або багато. Щоб створити новий медіа-запит у Dreamweaver, виконайте такі дії:

Відкрийте панель «Конструктор CSS», вибравши «Вікно→Стилі CSS».

Виберіть наявну таблицю стилів на панелі «Джерела» або створіть нову, натиснувши знак «плюс» (+) на панелі «Джерела».

Клацніть знак плюс (+) на панелі @Media на панелі конструктора CSS.

Відкриється діалогове вікно Визначення медіа-запитів.

Виберіть «Медіа» у першому розкривному списку та «Екран» у другому спадному списку.

Перемістіть курсор праворуч від кожного випадаючого списку, щоб відобразився знак плюс, а потім клацніть знак плюс, щоб додати нове поле.

У діалоговому вікні «Медіазапити» з’явиться нове поле, щоб ви могли вказати орієнтацію. Це поле є необов’язковим, але зазвичай використовується, якщо ви хочете створити різні дизайни для пейзажних і портретних зображень на планшеті або смартфоні. Якщо ви не хочете створювати додаткові макети на основі орієнтації, ви можете видалити це поле, натиснувши знак мінус.

Примітка . Знаки плюс і мінус стають видимими лише тоді, коли ви наведете курсор на праву частину діалогового вікна.

Перемістіть курсор праворуч від спадних списків, клацніть знак плюса вдруге, щоб додати поле, і введіть умову мінімальної ширини.

Поле «Мінальна ширина» з’являється в діалоговому вікні «Медіазапити», щоб ви могли вказати мінімальну ширину, яку потрібно використовувати для націлювання запиту. Мінімальна ширина важлива, оскільки медіа-запит націлений на стилі на основі вказаного вами діапазону ширини від мінімального до максимального, який буде розглянуто на наступному кроці.

Перемістіть курсор праворуч від розкривних списків, клацніть знак плюса втретє, щоб додати поле, і введіть умову максимальної ширини.

У діалоговому вікні з’являється поле Max-Width, щоб ви могли вказати максимальну ширину, яку ви хочете використовувати для націлювання запиту.

Натисніть кнопку OK.

Діалогове вікно «Медіазапити» закриється, а медіа-запит генерується та додається до таблиці стилів, яку ви вибрали на панелі «Джерела» на панелі «Конструктор CSS».

Щоб додати додаткові медіа-запити до будь-якої вибраної таблиці стилів, повторіть кроки 3–8. Щоб додати медіа-запити до іншої таблиці стилів, повторіть кроки 2–8.

Незважаючи на те, що ви можете зберігати медіа-запити в будь-якій кількості різних таблиць стилів, збереження їх усіх в одній зовнішній таблиці стилів є ефективнішим, оскільки кожну таблицю стилів потрібно завантажувати з сервера окремо, що вимагає більшої пропускної здатності. Завантаження однієї довгої таблиці стилів із кількома медіа-запитами є дещо ефективнішим, ніж завантаження кількох таблиць стилів.