Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
mediazapiti [2023/10/09 17:47] tro |
mediazapiti [2023/10/12 18:01] (текущий) tro |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| ====== Медіазапити ====== | ====== Медіазапити ====== | ||
| - | Це інструмент, | + | * Це інструмент, |
| Робота з медіазапитами зводиться до застосування того чи іншого CSS-правила. Вибір та використання певного CSS-правила залежить від таких факторів, | Робота з медіазапитами зводиться до застосування того чи іншого CSS-правила. Вибір та використання певного CSS-правила залежить від таких факторів, | ||
| + | * правила, | ||
| < | < | ||
| @media screen and (min-width: 900px) { | @media screen and (min-width: 900px) { | ||
| body { | body { | ||
| background-color: | background-color: | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | ===== min-width ===== | ||
| + | визначає мінімальну ширину області перегляду. У разі, якщо екран відповідає значенню в min-width, будуть застосовані вкладені CSS-правила. | ||
| + | ===== max-width ===== | ||
| + | визначає максимальну ширину в' | ||
| + | ===== print ===== | ||
| + | визначити стилі, що будуть застосовані при відправці на друк. Друк може виконуватися на фізичному принтері або віртуально. | ||
| + | < | ||
| + | @media print { | ||
| + | body { | ||
| + | color: green; | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | ===== all ===== | ||
| + | Якщо не вказати тип носія, за замовчуванням буде використано значення all. Воно означає будь-який пристрій. | ||
| + | </ | ||
| + | ===== screen ===== | ||
| + | визначає стилі, що будуть застосовані тільки для пристроїв з фізичним екраном: | ||
| + | < | ||
| + | @media (min-width: 400px) { | ||
| + | /* ... */ | ||
| + | } | ||
| + | </ | ||
| + | ===== and / or / not / only ===== | ||
| + | Медіазапити підтримують логічні оператори and, or, not, | ||
| + | Ці оператори подібні до тих, які використовуються в математиці, | ||
| + | < | ||
| + | @media only|not media-type ****only|and|not ****(media-feature) { | ||
| + | /* | ||
| + | Набір CSS-правил, | ||
| + | якщо умова перевірки медіатипу та виразу істинна | ||
| + | */ | ||
| + | } | ||
| + | </ | ||
| + | ====== Фонові зображення під ретіна-дісплей (у CSS) ====== | ||
| + | - Викачуємо зораження під кожен розмір єкрана | ||
| + | - В backround-image в css під кжен медіа-запит вказуємо шлях до кожного розміру | ||
| + | - Потім викачуємо під кожен розмір дисплею 2х і додаємо картинку (для retina-єкранів) | ||
| + | |||
| + | ====== Контектні зображення під ретіна-дісплей (у HTML) ====== | ||
| + | - Викачуємо зораження під кожен розмір 2x єкрана | ||
| + | - у тегу imgпере src додаємо | ||
| + | < | ||
| + | <img | ||
| + | srcset=" | ||
| + | ./ | ||
| + | |||
| + | src=" | ||
| + | </ | ||
| + | |||
| + | ====== Кадрування зобрження для різних єкранів ====== | ||
| + | - викачуємо 1х під кожен єкран | ||
| + | - викачуємо 2х під кожен єкран | ||
| + | - викорустужмо код | ||
| + | < | ||
| + | < | ||
| + | <source srcset=" | ||
| + | <source srcset=" | ||
| + | <source srcset=" | ||
| + | <img src " | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ====== Підхід «Mobile First» ====== | ||
| + | вимагає починати створення сайту із мобільної версії. Давай з’ясуємо переваги цього підходу. | ||
| + | < | ||
| + | selector { | ||
| + | /* Базові стилі */ | ||
| + | } | ||
| + | |||
| + | @media (min-width: ширина-планшета) { | ||
| + | selector { | ||
| + | /* Стилі планшета */ | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media (min-width: ширина-десктопа) { | ||
| + | selector { | ||
| + | /* Стилі робочого столу */ | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | ====== Рекомендації ====== | ||
| + | При формуванні у «Mobile First» | ||
| + | - Спочатку робимо макет для ширини 320px | ||
| + | - потім описуємо першу реперну точку медіа-запиту з макету (наприклад для min-width: 380px) | ||
| + | - кожну наступну реперну точку під попередньою описуємо (каскад стилів) | ||
| + | |||
| + | Додаємо всередині кожного медіа-запиту ще один вкладенний запит | ||
| + | < | ||
| + | @media (min-resolution: | ||
| + | .box { | ||
| + | background-image: | ||
| } | } | ||
| } | } | ||
| </ | </ | ||