Различия

Показаны различия между двумя версиями страницы.

--- mediazapiti [2023/10/10 18:10]
tro
+++ mediazapiti [2023/10/12 18:01] (текущий)
tro
@@ Строка 43: / Строка 43: @@
   */
 }
+</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>
@@ Строка 64: / Строка 92: @@
 }
 </code>
 ====== Рекомендації ======
 При формуванні у «Mobile First»
-  - Починаємо описувати медіа -запити у самому низу
+  - Спочатку робимо макет для ширини 320px
-  - Спочатку робимо для ширини 320px
+  - потім описуємо першу реперну точку медіа-запиту з макету (наприклад для min-width: 380px)
-  - потім описуємо першу реперну току з макету (наприклад для min-width: 380px)
   - кожну наступну реперну точку під попередньою описуємо (каскад стилів)
+Додаємо всередині кожного медіа-запиту ще один вкладенний запит
+<code>
+@media (min-resolution: 192dpi) {
+  .box {
+    background-image: url("https://picsum.photos/id/237/640/480");
+  }
+}
+</code>