Различия

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

--- mediazapiti [2023/10/12 17:16]
tro [Зміна зображень під різний розмір єкранів]
+++ mediazapiti [2023/10/12 18:01] (текущий)
tro
@@ Строка 44: / Строка 44: @@
 }
 </code>
-====== Зміна зображень під різний розмір єкранів ======
+====== Фонові зображення під ретіна-дісплей (у CSS) ======
   - Викачуємо зораження під кожен розмір єкрана
   - В backround-image в css під кжен медіа-запит вказуємо шлях до кожного розміру
-  - Потім викачуємо і додаємо картинку 2х для retina-єкранів
+  - Потім викачуємо під кожен розмір дисплею 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» ======
 вимагає починати створення сайту із мобільної версії. Давай з’ясуємо переваги цього підходу.
@@ Строка 73: / Строка 98: @@
   - потім описуємо першу реперну точку медіа-запиту з макету (наприклад для min-width: 380px)
   - кожну наступну реперну точку під попередньою описуємо (каскад стилів)
+Додаємо всередині кожного медіа-запиту ще один вкладенний запит
+<code>
+@media (min-resolution: 192dpi) {
+  .box {
+    background-image: url("https://picsum.photos/id/237/640/480");
+  }
+}
+</code>