Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
mediazapiti [2023/10/09 17:58] tro |
mediazapiti [2023/10/12 18:01] (текущий) tro |
||
|---|---|---|---|
| Строка 21: | Строка 21: | ||
| color: green; | color: green; | ||
| } | } | ||
| - | } | ||
| - | </ | ||
| - | ===== screen ===== | ||
| - | визначає стилі, що будуть застосовані тільки для пристроїв з фізичним екраном: | ||
| - | < | ||
| - | @media screen and (min-width: 400px) { | ||
| - | /* ... */ | ||
| } | } | ||
| </ | </ | ||
| Строка 40: | Строка 33: | ||
| } | } | ||
| </ | </ | ||
| + | ===== 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: | ||
| + | } | ||
| + | } | ||
| + | </ | ||