Различия

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

--- mediazapiti [2023/10/12 17:27]
tro [Рекомендації]
+++ mediazapiti [2023/10/12 18:01] (текущий)
tro
@@ Строка 44: / Строка 44: @@
 }
 </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» ======
 вимагає починати створення сайту із мобільної версії. Давай з’ясуємо переваги цього підходу.