mediazapiti [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Медіазапити ======
  * Це інструмент, який робить можливим створення сучасних адаптивних веб-сторінок, які однаково добре виглядають на будь-якому екрані: десктопі або смартфоні.
Робота з медіазапитами зводиться до застосування того чи іншого CSS-правила. Вибір та використання певного CSS-правила залежить від таких факторів, як розмір вікна браузера (області перегляду, в’юпорта), налаштування браузера, можливості пристрою і т.д.
  * правила, які перебувають у медіазапитах, беруть участь у стандартному каскадуванні при складанні фінальних стилів елемента.
<code>
@media screen and (min-width: 900px) {
  body {
    background-color: orange;
  }
}
</code>
===== min-width =====
визначає мінімальну ширину області перегляду. У разі, якщо екран відповідає значенню в min-width, будуть застосовані вкладені CSS-правила.
===== max-width =====
визначає максимальну ширину в'юпорта, до якої включно будуть застосовуватися вкладені CSS-правила.
===== print =====
визначити стилі, що будуть застосовані при відправці на друк. Друк може виконуватися на фізичному принтері або віртуально.
<code>
@media print {
  body {
    color: green;
  }
}
</code>
===== all =====
Якщо не вказати тип носія, за замовчуванням буде використано значення all. Воно означає будь-який пристрій.
</code>
===== screen =====
визначає стилі, що будуть застосовані тільки для пристроїв з фізичним екраном: смартфони, планшети, монітори, телевізори тощо.
<code>
@media (min-width: 400px) {
  /* ... */
}
</code>
===== and / or /  not / only =====
Медіазапити підтримують логічні оператори and, or, not,
Ці оператори подібні до тих, які використовуються в математиці, логіці або мовах програмування. Якщо оператор не вказано, використовується значення за замовчуванням — only.
<code>
@media only|not media-type ****only|and|not ****(media-feature) {
  /*
    Набір CSS-правил, які потрібно застосувати до документа,
    якщо умова перевірки медіатипу та виразу істинна
  */
}
</code>
====== Фонові зображення під ретіна-дісплей (у CSS) ======
  - Викачуємо зораження під кожен розмір єкрана
  - В backround-image в css під кжен медіа-запит вказуємо шлях до кожного розміру
  - Потім викачуємо під кожен розмір дисплею 2х і додаємо картинку (для retina-єкранів)

====== Контектні зображення під ретіна-дісплей (у HTML) ======
  - Викачуємо зораження під кожен розмір 2x єкрана
  - у тегу imgпере src додаємо
<code>
<img
srcset="./image1.jpg 1x,
./image1.jpg 2x"

src="./original.jpg" />
</code>

====== Кадрування зобрження для різних єкранів ======
  - викачуємо 1х під кожен єкран
  - викачуємо 2х під кожен єкран
  - викорустужмо код
<code>
<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>
</code>

====== Підхід «Mobile First» ======
вимагає починати створення сайту із мобільної версії. Давай з’ясуємо переваги цього підходу.
<code>
selector {
  /* Базові стилі */
}

@media (min-width: ширина-планшета) {
  selector {
    /* Стилі планшета */
  }
}

@media (min-width: ширина-десктопа) {
  selector {
    /* Стилі робочого столу */
  }
}
</code>

====== Рекомендації ======
При формуванні у «Mobile First»
  - Спочатку робимо макет для ширини 320px
  - потім описуємо першу реперну точку медіа-запиту з макету (наприклад для min-width: 380px)
  - кожну наступну реперну точку під попередньою описуємо (каскад стилів)

Додаємо всередині кожного медіа-запиту ще один вкладенний запит
<code>
@media (min-resolution: 192dpi) {
  .box {
    background-image: url("https://picsum.photos/id/237/640/480");
  }
}
</code>