Различия

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

--- mediazapiti [2023/10/12 17:50]
tro
+++ mediazapiti [2023/10/12 18:01] (текущий)
tro
@@ Строка 44: / Строка 44: @@
 }
 </code>
-====== Фонові зображення під різний розмір єкранів (у CSS) ======
+====== Фонові зображення під ретіна-дісплей (у CSS) ======
   - Викачуємо зораження під кожен розмір єкрана
   - В backround-image в css під кжен медіа-запит вказуємо шлях до кожного розміру
   - Потім викачуємо під кожен розмір дисплею 2х і додаємо картинку (для retina-єкранів)
-====== Контектні зображення під різний розмір єкранів (у HTML) ======
+====== Контектні зображення під ретіна-дісплей (у HTML) ======
   - Викачуємо зораження під кожен розмір 2x єкрана
   - у тегу imgпере src додаємо
@@ Строка 58: / Строка 59: @@
 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» ======
 вимагає починати створення сайту із мобільної версії. Давай з’ясуємо переваги цього підходу.