Медіазапити
- Це інструмент, який робить можливим створення сучасних адаптивних веб-сторінок, які однаково добре виглядають на будь-якому екрані: десктопі або смартфоні.
Робота з медіазапитами зводиться до застосування того чи іншого CSS-правила. Вибір та використання певного CSS-правила залежить від таких факторів, як розмір вікна браузера (області перегляду, в’юпорта), налаштування браузера, можливості пристрою і т.д.
- правила, які перебувають у медіазапитах, беруть участь у стандартному каскадуванні при складанні фінальних стилів елемента.
@media screen and (min-width: 900px) { body { background-color: orange; } }
min-width
визначає мінімальну ширину області перегляду. У разі, якщо екран відповідає значенню в min-width, будуть застосовані вкладені CSS-правила.
max-width
визначає максимальну ширину в'юпорта, до якої включно будуть застосовуватися вкладені CSS-правила.
визначити стилі, що будуть застосовані при відправці на друк. Друк може виконуватися на фізичному принтері або віртуально.
@media print { body { color: green; } }
all
Якщо не вказати тип носія, за замовчуванням буде використано значення all. Воно означає будь-який пристрій. </code>
screen
визначає стилі, що будуть застосовані тільки для пристроїв з фізичним екраном: смартфони, планшети, монітори, телевізори тощо.
@media (min-width: 400px) { /* ... */ }
and / or / not / only
Медіазапити підтримують логічні оператори and, or, not, Ці оператори подібні до тих, які використовуються в математиці, логіці або мовах програмування. Якщо оператор не вказано, використовується значення за замовчуванням — only.
@media only|not media-type ****only|and|not ****(media-feature) { /* Набір CSS-правил, які потрібно застосувати до документа, якщо умова перевірки медіатипу та виразу істинна */ }
Фонові зображення під ретіна-дісплей (у CSS)
- Викачуємо зораження під кожен розмір єкрана
- В backround-image в css під кжен медіа-запит вказуємо шлях до кожного розміру
- Потім викачуємо під кожен розмір дисплею 2х і додаємо картинку (для retina-єкранів)
Контектні зображення під ретіна-дісплей (у HTML)
- Викачуємо зораження під кожен розмір 2x єкрана
- у тегу imgпере src додаємо
<img srcset="./image1.jpg 1x, ./image1.jpg 2x" src="./original.jpg" />
Кадрування зобрження для різних єкранів
- викачуємо 1х під кожен єкран
- викачуємо 2х під кожен єкран
- викорустужмо код
<picture> <source srcset="./img1-destop.jpg 1x, img1-destop.jpg 2x" media="(min-width: 1166px)"> <source srcset="./img1-tablet.jpg 1x, img1-tablet.jpg 2x" media="(min-width: 768px)> <source srcset="./img1-mobile.jpg 1x, img1-mobile.jpg 2x" media="(max-width: 767px)> <img src "./img1-tablet.jpg" alt="dsdgd"> </picture>
Підхід «Mobile First»
вимагає починати створення сайту із мобільної версії. Давай з’ясуємо переваги цього підходу.
selector { /* Базові стилі */ } @media (min-width: ширина-планшета) { selector { /* Стилі планшета */ } } @media (min-width: ширина-десктопа) { selector { /* Стилі робочого столу */ } }
Рекомендації
При формуванні у «Mobile First»
- Спочатку робимо макет для ширини 320px
- потім описуємо першу реперну точку медіа-запиту з макету (наприклад для min-width: 380px)
- кожну наступну реперну точку під попередньою описуємо (каскад стилів)
Додаємо всередині кожного медіа-запиту ще один вкладенний запит
@media (min-resolution: 192dpi) { .box { background-image: url("https://picsum.photos/id/237/640/480"); } }