ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ css: ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° CSS
Π‘ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅ΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΡ ΡΠ°ΠΉΡΠΎΠ². ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ, ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ β ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ². ΠΠΎ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ ΡΠ°ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΌΠΈ ΠΏΠ΅ΡΠ΅ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ.
Π§Π°ΡΡΠΎ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. Π‘Π°ΠΉΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΈ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ , Π½ΠΎ Π²ΠΎΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠ°ΡΡΠ΅ Π½Π΅ ΠΆΠ΅Π»Π°ΡΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡ, Π° Π²ΡΠ»Π΅Π·Π°ΡΡ Π·Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ, Π²ΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π½Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π° Π²ΠΎ-Π²ΡΠΎΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΠΏΠΎΠ³ΡΠ΅ΡΠ½ΠΎΡΡΠΈ Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, Π½Ρ ΠΈ, Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Π½Π° ΡΠ°ΠΌ ΡΡΠ°ΡΡΡ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°. ΠΠ΅Π΄Ρ Π²ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ ΠΈΠ· ΠΌΠ΅Π»ΠΎΡΠ΅ΠΉ.
ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ β CSS.
ΠΠ°ΡΠΈΠ°Π½Ρ 1. Π Π°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ .
Π CSS ΡΠ°ΠΉΠ»Π΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡ img-adaptive ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ:
.css-adaptive {
display: block;
max-width: 100%;
height: auto;
}
ΠΠ°Π»Π΅Π΅, ΠΏΡΠΈ Π²ΡΡΠ°Π²ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎ ΠΊΠ»Π°ΡΡ:
<img src=βimages/1.jpgβ class=βcss-adaptiveβ>
ΠΡΠΈ ΡΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° Π² ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ. ΠΠΎ ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ css-adaptive.
ΠΠ°ΡΠΈΠ°Π½Ρ 2. Π Π°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅.
ΠΠΎΠΏΡΡΡΠΈΠΌ Π½Π° Π²Π°ΡΠ΅ΠΌ Π½ΠΎΠ²ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΡΠ±Π»ΠΈΠΊΡΡΡΡΡ Π½ΠΎΠ²ΠΎΡΡΠΈ. Π ΠΊΠ°ΠΆΠ΄ΡΡ Π½ΠΎΠ²ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΏΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°. Π ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ img-adaptiveΠ΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ, Π²ΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π΄ΠΎΠ»Π³ΠΎ, Π° Π²ΠΎ-Π²ΡΠΎΡΡΡ , Π΅ΡΠ»ΠΈ Π½ΠΎΠ²ΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ, ΡΠΎ ΠΎΠ½ΠΈ ΠΏΡΠΎΡΡΠΎ Π½Π΅ Π±ΡΠ΄ΡΡ Π·Π½Π°ΡΡ ΠΏΡΠΎ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ.
ΠΡΠ°ΠΊ, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ div Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ news.
<div class=βnewsβ>
<h2>ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS</h2>
<img src=βimahes/1.jpgβ>
<img src=βimahes/2.jpgβ>
<img src=βimahes/3.jpgβ>
</div>
Π Π² ΡΠ°ΠΉΠ» Ρ CSS ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
.news img {
display: block;
max-width: 100%;
height: auto;
}
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π½ΠΎΠ²ΠΎΡΡΠΈ ΡΡΠ°Π½ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Π² ΡΠΎΡ. ΡΠ΅ΡΡΡ :
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅ β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈΡΡ Ρ Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ, Π½Π°ΡΡΠ°Π»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π΄ΡΡΠ³ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ, ΡΡΠΎΠ±Ρ ΡΡΠ°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ. Π Π΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎΠ± ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ. ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠΈΡΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°, Π° ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ:
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS? ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠ±ΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π² ΡΠ΅Π³Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΡΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ). ΠΠ°Ρ HTML-ΠΊΠΎΠ΄ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ:
<img src="https://goo.gl/PAuNsb" alt="baobab" /> <!-- Π°ΡΡΠΈΠ±ΡΡΡ width ΠΈ height Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ±ΡΠ°ΡΡ --> <img src="https://goo.gl/PAuNsb" alt="baobab" />
Β
Π ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ Π·Π°ΠΏΠΈΡΡ:
img { max-width: 100%; }
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ΅Π³Π° <img>
Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΉΡΠΈ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π° ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ Π½Π΅Π΅.
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π²Π½ΠΎΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°:
img { max-width: 50%; }
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎ
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ΅Π³ΠΈ <video>
, Π° ΡΠ°ΠΊΠΆΠ΅ <embed>
ΠΈ <object>
, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΄Π»Ρ Π½ΠΈΡ
ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ CSS-ΠΊΠΎΠ΄, ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΡΡ ΡΡΠ°Π·Ρ Π²ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ:
img, video, embed, object { max-width: 100%; }
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ iframe
ΠΠ΅Π»Π° ΠΎΠ±ΡΡΠΎΡΡ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΡΠ΅ΡΠ΅Π· ΡΠ΅Π³ <iframe>
. Π’ΠΎΠ³Π΄Π° Π²ΡΡΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π·Π΄Π΅ΡΡ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠΈΠ΄Π΅ΡΡΡ ΠΏΡΠΈΠ±Π΅Π³Π½ΡΡΡ Π»ΠΈΠ±ΠΎ ΠΊ ΠΏΠΎΠΌΠΎΡΠΈ JavaScript, Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ Ρ
ΠΈΡΡΡΠΉ CSS-ΠΊΠΎΠ΄.
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΠ±ΡΠ°Π»ΠΈ Π²ΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅Π³ <iframe>
Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ <div>
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<div> <iframe src="video_url" allowfullscreen></iframe> </div>
ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ CSS:
.video { height: 0; position: relative; padding-bottom: 56.25%; } .video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
ΠΠ°ΠΊ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, Π² ΠΊΠΎΠ΄Π΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ padding-bottom
ΡΠΎ ΡΡΡΠ°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 56.25%
. Π§ΡΠΎ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ? ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ padding-bottom
, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°. Π§ΠΈΡΠ»ΠΎ 56.25 ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ² ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ Π²ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ (16:9) ΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΈΠ² ΡΠΈΡΠ»ΠΎ ΠΊΠΎΡΠΎΡΠΊΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π½Π° ΡΠΈΡΠ»ΠΎ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΡΠΌΠ½ΠΎΠΆΠΈΠ² ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π° 100:
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π²ΠΈΠ΄Π΅ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½, ΡΠΊΠ°ΠΆΠ΅ΠΌ, 4:3, ΡΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ padding-bottom
ΠΏΡΠΎΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡ ΠΆΠ΅ ΠΏΡΠΎΡΠ΅Π΄ΡΡΡ:
ΠΠ°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΈ Π² ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅ Bootstrap.
ΠΠ°Π»Π΅Π΅ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅: Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ Flexbox.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS β Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° Π½Π° vc.ru
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½Ρ. Π Π΅ΡΠ»ΠΈ Π² Π½ΡΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡΠΈΡΡΡΡ Π΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΠΌΠΈ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
{«id»:162969,»url»:»https:\/\/vc.ru\/dev\/162969-kak-sdelat-izobrazheniya-adaptivnymi-s-pomoshchyu-css»,»title»:»\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/dev\/162969-kak-sdelat-izobrazheniya-adaptivnymi-s-pomoshchyu-css»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/dev\/162969-kak-sdelat-izobrazheniya-adaptivnymi-s-pomoshchyu-css&title=\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/dev\/162969-kak-sdelat-izobrazheniya-adaptivnymi-s-pomoshchyu-css&text=\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/dev\/162969-kak-sdelat-izobrazheniya-adaptivnymi-s-pomoshchyu-css&text=\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/dev\/162969-kak-sdelat-izobrazheniya-adaptivnymi-s-pomoshchyu-css»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS&body=https:\/\/vc.ru\/dev\/162969-kak-sdelat-izobrazheniya-adaptivnymi-s-pomoshchyu-css»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}
7390
ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠ²
ΠΠ°ΡΡ Π½Π΅Π΄Π΅Π»Ρ Π½Π°Π·Π°Π΄ Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π» ΠΎΠ±ΡΡΠ°ΡΡΠ΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ±ΡΡΡΠ½ΠΈΠ», ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ. Π Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ. Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ. Π― ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ ΠΈΡ ΡΠ΅ΡΠΈΡΡ.
Π§ΡΠΎ ΠΌΠ½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ?
Π‘Π΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΠΌ ΠΈΠ»ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΠΎΠ³Π΄Π° Π²Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Ρ width. Π’ΠΎΠ³Π΄Π° Π²ΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ.
ΠΠ°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ Π²Ρ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΈΡΠΈΠ½Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ΅Π½Ρ, Π° Π½Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ.
ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 50%. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΠ΄Π΅Π»Π°Π΅Ρ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΠΌΠΈ, ΠΈ ΠΎΠ½ΠΈ ΡΠΌΠΎΠ³ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°.
Π‘ΡΠΎΠΈΡ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ?
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π²ΠΎΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ½Π΅ Π·Π°Π΄Π°ΡΡ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ, β ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ β Π΅ΡΠ΅ ΠΎΠ΄Π½Π° Π²Π°ΠΆΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ CSS, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ. Π― Π½Π΅ Π±ΡΠ΄Ρ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠΎΠΉ ΠΏΠΎΡΡ ΠΏΠΎΠ·ΠΆΠ΅, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ.
ΠΡΠ²Π΅Ρ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ: Β«ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²Β». ΠΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π»ΠΎ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ, Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 50% Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠΌ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΏΠΎΠΌΠΎΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²:
@media only screen and (max-width: 480px) {
img {
width: 100%;
}
}
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° Π»ΡΠ±ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΌΠ΅Π½Π΅Π΅ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
ΠΠΎΡΠ΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ΅Π΅?
ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±, ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, β ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π»ΡΡΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ max-width ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Π΅ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ max-width (Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅).
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠ°Π·ΠΌΠ΅Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° Π²ΡΠ΅Π³ΠΎ 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ°:
img {
max-width: 100%;
width: 500px; // assume this is the default size
}
ΠΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ Π½Π° 100%, ΡΡΠΎ ΡΠΆΠΈΠΌΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ 500 Π΄ΠΎ 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
Π₯ΠΎΡΠΎΡΠΎ ΡΠΎ, ΡΡΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠ»Π°Π²Π½ΡΠΌ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΌΠ΅Π½Π΅Π΅ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° Π±ΡΠ΄Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠ΅ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π½Π°ΡΡΡΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΎ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ½ΠΎΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width.
Π ΡΡΠΎ Π½Π°ΡΡΠ΅Ρ Π²ΡΡΠΎΡΡ?
ΠΡΡΠ³Π°Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ, ΡΠ²ΡΠ·Π°Π½Π° ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Π²ΡΡΠΎΡΡ. ΠΠ±ΡΡΠ½ΠΎ Π²ΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²ΡΡΠΎΡΡ Π²Π°ΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ (ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΊΠ°ΠΊ Π±Ρ Π»ΠΎΠΌΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅).
ΠΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ. ΠΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠ½ΠΎ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, Π½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ.
img {
width: 100%;
height: 300px;
}
Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ CSS Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ β¦
Π Π΅ΡΠ΅Π½ΠΈΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Object-Fit
Π§ΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π²Π°ΡΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ object-fit. ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ object-fit ΠΈ ΠΏΡΠΈΡΠ²ΠΎΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ»ΡΡΡΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: bottom;
}
ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-position (Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ object-fit), ΡΡΠΎΠ±Ρ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ Π½Π΅ Π·Π½Π°ΡΡ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌ, Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎΡ ΠΏΠΎΡΡ ΠΏΠΎΠΌΠΎΠ³ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡΡ ΠΈ ΡΠ΅ΡΠΈΡΡ Π²Π°ΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ ΠΌΠΎΠΉ ΠΊΠ°Π½Π°Π» Π½Π° Youtube.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΡΠ΅Π½ΠΈΠ΅!
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π ΡΡΠΎΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅, ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ ΠΌΠ°Π»ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ, Π²ΡΠ΅ ΠΎΠ½ΠΈ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΠΈ ΠΏΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΈ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ ΠΏΡΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° srcset
, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΎΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π½Π°ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΡΠ°ΠΉΡΠΎΠ², Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ ΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΠΈΠΌΠΈΡΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ², Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈΠ· ΠΎΠ±ΠΎΠΉΠΌΡ CSS.
<img { width: 100%; height: auto; }>
ΠΠ°Π·ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ°ΡΠ½ΡΠΌ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² Π·Π°ΠΏΠΈΡΡΡ
, ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
Π±Π»ΠΎΠΊΠ°Ρ
, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΌΡ Π·Π°Π΄Π°Π»ΠΈ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠΈΡΠΈΠ½Ρ width: 96%;
ΠΈ Π²ΡΡΡΠ°Π²ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π² max-width: 960px;
, Π² ΡΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ²Π΅ΡΡΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <img >
Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π² 100%, ΡΠ°ΠΊ, ΡΡΠΎ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΡΠΎΡΡ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΠΌ Π² Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅ΠΆΠΈΠΌ, Π² ΠΈΡΠΎΠ³Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ.
HTML:
<div> <img src="image01.jpg" /> </div>
CSS:
div.container { width: 96%; max-width: 960px; margin: 0 auto; /* ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ */ } img { width: 100%; /* ΡΠΈΡΠΈΠ½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */ height: auto; /* Π²ΡΡΠΎΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ */ }
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ <img>
ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π±ΡΠ»ΠΈ Π·Π°Π΄Π°Π½Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ HTML-Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅.
ΠΊΠΎΠ½Π΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ°ΡΠ½Π΄Π° β CSS-LIVE
ΠΡΡΡ ΠΠΎΡΡΠΎΠ½, ΡΡΠ΅Π΄Π°, 16 ΠΌΠ°Ρ 2012
ΠΠΎΡΠ»Π΅ ΠΠ΅Π»ΠΈΠΊΠΎΠ³ΠΎ ΠΠΏΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΡΠ°ΡΠ·Π΅ΡΠ½ΠΎ-ΠΡΠ΅ΡΠΈΠΊΡΠ½ΠΎΠ³ΠΎ Π’Π°ΡΠ°ΡΠ°ΠΌΠ° ΠΏΡΠΈΡΠ»Π° ΠΠ΅Π»ΠΈΠΊΠ°Ρ ΠΠ°ΠΉΡΠΊΠ°Ρ ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎ-ΠΠ°ΡΡΠΈΠ½ΠΎΡΠ½Π°Ρ Π¨ΡΠΌΠΈΡ Π° 2012-Π³ΠΎ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΠΎΡΠ΅ΡΠ΅Π΄Π½Π°Ρ Π½Π΅ΡΠ°Π·Π³Π°Π΄Π°Π½Π½Π°Ρ Π·Π°Π³Π°Π΄ΠΊΠ° Β«ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎΒ» Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡ ΠΎΡΠ΄Π°Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠ΅ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠΈΠΏΠ° Β«ΡΠ΅ΡΠΈΠ½ΡΒ», ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΠΌΠ΅Π½ΡΡΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠΌΠΈ, Π·ΡΡ ΡΠ°ΡΡ ΠΎΠ΄ΡΡ ΡΡΠ°ΡΠΈΠΊ? ΠΠ»ΠΈ Π²Ρ ΠΎΡΠ΄Π°Π΅ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅ΡΠ·ΠΊΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡ, Π±ΡΠ΄ΡΡΠΈ ΡΠ°ΡΡΡΠ½ΡΡΡΠΌΠΈ Π½Π° Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΠΊΡΠ°Π½Π΅? ΠΠ΅Π±ΠΌΠ°ΡΡΠ΅ΡΠ°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡ Π½Π° ΠΈΡΠΊΡΡΠ½ΡΠ΅ Ρ Π°ΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΎΡΠ΄Π°Π²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (Ρ.Π΅. <img> Π² HTML, Π° Π½Π΅ CSS-ΡΠΎΠ½Ρ) Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠΎΠ² ΡΡΡΡΠΎΠΉΡΡΠ².
Π Π½ΠΎΡΠ±ΡΠ΅ 2011-Π³ΠΎ Ρ Π±ΡΠ» Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²Π°Π½ ΡΠ΅ΠΌ, ΡΡΠΎ Π½ΠΈΠΊΡΠΎ ΠΈΠ· Π°Π²ΡΠΎΡΠΎΠ² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΡΠΎ Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΠ» Β«Π΄Π»Ρ Π·Π°ΡΡΠ°Π²ΠΊΠΈΒ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ <picture>, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π²ΡΠΈΠΉ ΡΠΎΡ ΠΆΠ΅ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΡΠΎ <video> Π² HTML5:
<picture alt="Π·Π»ΠΎΠΉ ΠΏΠΈΡΠ°Ρ"> Β Β <source src=hires.png media="min-width:800px"> Β Β <source src=midres.png media="min-width:480px"> Β Β <source src=lores.png> Β Β Β <!-- Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² --> Β Β Β <img src=midres.png alt="Π·Π»ΠΎΠΉ ΠΏΠΈΡΠ°Ρ"> </picture>
ΠΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ Π΄ΡΡΠ³ΠΈΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΏΡΠΈΡΠ»ΠΈ ΠΊ ΡΠΎΠΉ ΠΆΠ΅ ΠΌΡΡΠ»ΠΈ, ΠΈ ΠΈΠΌ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ Π³ΡΡΠΏΠΏΡ W3C Π΄Π»Ρ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΈ ΡΠ΄Π΅Π»Π°Π»ΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, Π² ΡΠ½Π²Π°ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ HTML5 ΠΠΉΡΠ½ Π₯ΠΈΠΊΡΠΎΠ½ ΡΠΊΠ°Π·Π°Π»:
Π ΠΊΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² <img>? ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ <img> ΡΠ»ΡΠΆΠΈΡ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅, Π³Π΄Π΅ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ.
ΠΠ½ΡΡΠ·ΠΈΠ°Π·ΠΌ ΡΠ΅Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈΠ· ΠΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π³ΡΡΠΏΠΏΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ W3C ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΠ½ΠΈΠΊ ΠΎΡΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΈΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°ΠΌΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π½ΠΈΠΊΡΠΎ Π² ΡΠΏΠΎΡ Π½Π΅ Π²ΠΈΠ΄ΠΈΡ. ΠΠΎ Π½Π° ΡΡΠΎΠΉ Π½Π΅Π΄Π΅Π»Π΅ ΠΠ΄Π²Π°ΡΠ΄ ΠβΠΠΎΠ½Π½ΠΎΡ ΠΈΠ· ΠΠΏΠ»Π° ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΠ» Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ Π½ΠΎΠ²ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ srcset ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <img>. ΠΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠ»ΠΎ Π΅Π³ΠΎ ΠΆΠ΅ ΡΠ΅Π²ΡΠ°Π»ΡΡΠΊΠΎΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ img-set Π² CSS, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΆΠ΅ Π²ΠΎΡΠ»ΠΎ Π² WebKit:
<img src="foo-lores.jpg" Β Β Β srcset="foo-hires.jpg 2x, foo-superpuperhires.jpg 6.5x" Β Β Β alt="Π³ΠΎΠ΄Π½ΡΠΉ Alt-ΡΠ΅ΠΊΡΡ Π΄Π»Ρ foo.">
Π§ΠΈΡΠ»Π° Β«2Β» ΠΈ Β«6.5xΒ» Π³ΠΎΠ²ΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠ± ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ : Ρ foo-hires.jpg ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² 2 ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Ρ foo-lores.jpg.
Π‘ΠΏΡΡΡΡ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π½Π΅ΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠΏΠ»ΠΎΠ²ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π±ΡΠ» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ.
ΠΠ΅ΠΆΠ΄Ρ <picture> ΠΈ srcset β Π΄Π²Π° Π²Π°ΠΆΠ½ΡΡ ΡΠ°Π·Π»ΠΈΡΠΈΡ. Π‘Π°ΠΌΠΎΠ΅ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎΠ΅ β ΡΠΎ, ΡΡΠΎ srcset ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <img>, ΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΡΠ°ΠΌΠΎΠ΅ Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈ Π½Π΅Ρ (Ρ <img> Π½Π΅ ΠΏΡΠΎΠΉΠ΄Π΅Ρ ΡΠΎΡ ΠΆΠ΅ ΡΠΎΠΊΡΡ, ΡΡΠΎ Ρ <video> + <source>, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ β ΠΏΡΡΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ²; ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠβΠΠΎΠ½Π½ΠΎΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°ΡΡΠΈΠ±ΡΡΡ, ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΎ).
ΠΡΠΎΡΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π‘ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π²Π΅Π±ΠΌΠ°ΡΡΠ΅ΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΡΠΌΠ°ΡΡ ΠΎ Π»ΡΠ±ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π³Π»ΡΠ±ΠΈΠ½Ρ ΡΠ²Π΅ΡΠ°, ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ ΠΈ Ρ.ΠΏ., ΡΠ΅ΡΠ°ΡΡ, ΠΊΠ°ΠΊ ΡΠ³ΠΎΠ΄ΠΈΡΡ ΠΈΠΌ (Π΅ΡΠ»ΠΈ ΠΏΡΠΈΠ΄Π΅ΡΡΡ), ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΈ Π²ΡΡΠ°ΠΆΠ°ΡΡ Π²ΡΡ ΡΡΠΎ Π² ΠΊΠΎΠ΄Π΅. ΠΡΠΎ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ Π½Π°ΠΏΡΡΠ³Π°Π΅Ρ ΠΌΠΎΠ·Π³ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΈ Π²ΡΠ»ΠΈΠ²Π°Π΅ΡΡΡ Π² Β«ΠΌΠ½ΠΎΠ³ΠΎ Π±ΡΠΊΠ²Β» ΠΊΠΎΠ΄Π°: ΡΡΡΠ°Π½ΠΈΡΠΊΠ° Ρ 20 ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΠΊΠ°ΠΆΠ΄Π°Ρ Ρ 5 ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π΄Π»Ρ 5 ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <source>, Π±ΡΡΡΡΠΎ ΡΠ°Π·ΡΠ°ΡΡΠ°Π΅ΡΡΡ Π² ΠΎΠ±ΡΠ΅ΠΌΠ΅ ΠΊΠΎΠ΄Π°.
ΠβΠΠΎΠ½Π½ΠΎΡ Π½Π°ΠΏΠΈΡΠ°Π»:
ΠΠΎΡΠ΅ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±, Π° Π½Π΅ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅? ΠΡ, ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΡΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠ²Π΅ΡΠΆΠ΄Π°Π΅ΠΌ ΡΡΠΎ-ΡΠΎ ΠΎΠ± ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π±ΡΠ°ΡΠ·Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½Ρ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΠ³ΠΎ ΡΠ΅ΡΡΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ, Π½Π° ΠΈΡ Π²Π·Π³Π»ΡΠ΄, Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΊ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ, ΡΡΠΈΡΡΠ²Π°Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Β«ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ°Π΅ΠΌΡΠ΅Β» Π²Π΅ΡΠΈ ΡΠΈΠΏΠ° ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½ΠΎ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±, Π·Π°Π΄Π°Π½Π½ΡΠΉ Π΄Π»Ρ <img> ΡΠ΅ΡΠ΅Π· CSS, Π΅Π³ΠΎ Π°ΡΡΠΈΠ±ΡΡΡ width=β» ΠΈ height=β», ΠΈ Π΄Π°ΠΆΠ΅ Π²Π΅ΡΠΈ Π²ΡΠΎΠ΄Π΅ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π° Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
Π― Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ ΠΈΠ΄Π΅Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ°ΠΌΠΎΠΌΡ, ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ½ Β«Π·Π½Π°Π΅ΡΒ» ΠΎ ΡΠ²ΠΎΠ΅ΠΌ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΠΈ (ΡΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ, Π·Π°Π΄Π΅ΡΠΆΠΊΠ° ΡΠΈΠ³Π½Π°Π»Π°, ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ), Π²ΡΠ±ΠΈΡΠ°ΡΡ Π½Π°ΠΈΠ»ΡΡΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π·Π°Π΄Π°ΡΠΈ. Π‘ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π΅Π±ΠΌΠ°ΡΡΠ΅ΡΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄ΡΠΌΡΠ²Π°ΡΡΡΡ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΡΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΈ ΡΠ³ΠΎΠΆΠ΄Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ Π²Π°ΡΠΈΠ°Π½ΡΡ. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π»ΠΈΡΡ ΠΎΠΏΠΈΡΠ°ΡΡ Π·Π°Π²Π΅Π΄ΠΎΠΌΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΈΠΌ Π²Π΅ΡΠΈ β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ β Π° Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΆΠ΅ ΡΠ°ΠΌ ΡΠ΄Π΅Π»Π°Π΅Ρ Π½ΡΠΆΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΠ΅ Π±ΡΠ΄Π΅ΠΌ ΠΆΠΈΡΡ Π² ΠΊΠΎΡΠΌΠΎΡΠ΅ ΠΈ ΡΠΌΠΎΡΡΠ΅ΡΡ 3D-Π³ΠΎΠ»ΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π½Π° iDroid3000 ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π±Π»ΠΈΠ·ΠΎΡΡΡ ΡΠ΅ΡΠ½ΠΎΠΉ Π΄ΡΡΡ (ΡΠ΅ΡΠ½ΡΠ΅ Π΄ΡΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠΊΠΎΠ»ΡΠ½ΠΈΠΊΡ, Π²ΡΠ·ΡΠ²Π°ΡΡ Β«ΡΠΎΡΠΌΠΎΠ·Π°Β» Π³ΠΎΠ»ΠΎΠ³ΡΠ°ΠΌΠΌ) ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ; Π½Π°ΠΌ Π½Π΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ΅ΡΠ°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π±Π»ΠΈΠ·ΠΎΡΡΠΈ ΡΠ΅ΡΠ½ΡΡ Π΄ΡΡ ΠΈ Π·Π°Π΄Π½ΠΈΠΌ ΡΠΈΡΠ»ΠΎΠΌ Π΄ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΈΡ Π½Π° ΡΠ°ΠΉΡΡ.
Π£ ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ srcset Π΅ΡΡΡ Π΄Π²Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΠ΅ΡΠ²Π°Ρ ΠΎΡΠ΅Π½Ρ ΡΡΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½Π°, Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΠ²ΡΡΠ²ΡΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅: Π² ΡΠΎΠΌ Π²ΠΈΠ΄Π΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π΅ΡΡΡ Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ, ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΏΡΠΎΡΡΠΎ ΠΎΡΠ²ΡΠ°ΡΠΈΡΠ΅Π»Π΅Π½!
<img src="face-600-200-at-1.jpeg" alt="" srcset="face-600-200-at-1.jpeg 600w 200h 1x, face-600-200-at-2.jpeg 600w 200h 2x, face-icon.png 200w 200h">
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ β ΠΈ Π½ΡΠΆΠ½ΠΎ β ΡΠ»ΡΡΡΠΈΡΡ. ΠΠ΅Π»ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΡΡΠ΅ΡΠΈΠΊΠ΅. ΠΡΠ»ΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΡΡΠ°Π½Π½ΡΠΉ, Π΅Π³ΠΎ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. ΠΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°Π» Π΄ΠΎΠΊΡΠΎΡ Π Π΅ΠΌΠΈ, Β«Π₯ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, ΡΡΠΎΠ±Ρ Π²Π΅Π±ΠΌΠ°ΡΡΠ΅ΡΠ°ΠΌ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΡΡΠΈΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠΈΠΊΡΠΎΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ. Π’ΡΡ Π½Π΅ ΡΠ° ΡΠΈΡΡΠ°ΡΠΈΡ, ΡΡΠΎ Π±ΡΠ»Π° Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΠΈΠ·-Π·Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ².Β»
ΠΡΠΎΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π½Π΅ Ρ ΠΎΡΡΡ Π»ΠΈΡΠΈΡΡΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ. ΠΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ Π·Π°ΠΌΡΡΠ»ΠΎΠΌ (ΡΠΌ. ΡΠ°Π·Π΄Π΅Π» ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Β«ΠΡΠΆΠ½Π° Π»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ?Β», ΠΎΠ½ ΠΆΠ΅ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π΅), ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ Π½Π΅ ΡΠ±Π΅ΠΆΠ΄Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΠΏΠ»Π° ΡΠ΅ΡΠ°Π΅Ρ ΠΈΡ , Ρ ΠΎΡΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΊΠΈ srcset ΠΊΠ°ΠΊ ΡΠ°Π· ΡΠ±Π΅ΠΆΠ΄Π΅Π½Ρ, ΡΡΠΎ ΠΎΠ½ ΡΡΠΈΡΡΠ²Π°Π΅Ρ Π²ΡΠ΅ ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ.
ΠΠ΅Π±Π°ΡΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡΡΡ, Ρ ΠΏΠΎΠ»Π½ΡΠΌ ΠΈ ΠΎΡΠΊΡΡΡΡΠΌ ΠΎΠ±ΠΌΠ΅Π½ΠΎΠΌ ΠΌΠ½Π΅Π½ΠΈΡΠΌΠΈ. ΠΡΡΡ ΠΈ ΠΎΡΠΊΠΎΡΠ±Π»Π΅Π½Π½ΡΠ΅ ΡΡΠ²ΡΡΠ²Π°, ΠΊΡΠ΄Π° ΠΆ Π±Π΅Π· ΡΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΠΎΠ΅-ΠΊΡΠΎ ΠΈΠ· ΡΠ΅Ρ , ΠΊΡΠΎ ΡΡΡΠ΄ΠΈΠ»ΡΡ Π² ΠΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π³ΡΡΠΏΠΏΠ΅, ΡΡΠ²ΡΡΠ²ΡΠ΅Ρ, ΡΡΠΎ ΠΈΡ ΠΏΠΎΠΆΠ΅Π»Π°Π½ΠΈΡ ΠΈ ΡΡΡΠ΄Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ Π±Π΅Π· Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ.
ΠΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅Ρ , ΠΊΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π» <picture>, Ρ ΡΠΎΠΆΠ΅ Π² ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΡΡΠΎ ΡΡΠ²ΡΡΠ²ΡΡ. ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅, ΡΡΠΎ ΡΠ³ΠΎΠΈΠ·ΠΌ (Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Ρ Π±ΡΠ» Π±Ρ ΡΠ°Π΄, Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΠΎ Π±ΡΠ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ <ΡΡΠ°ΠΡΡΡΡ>, Π½ΠΎ Ρ ΡΠΌΠΈΡΠΈΠ»ΡΡ Ρ Π½Π΅ΡΠΏΡΠ°Π²Π΅Π΄Π»ΠΈΠ²ΠΎΡΡΡΡ ΠΆΠΈΠ·Π½ΠΈ). ΠΠΎ ΠΌΠ½Π΅ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»ΡΡΠ°Π΅Π² ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ΄ΠΎΠ±Π΅Π½ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ΅Π½Ρ ΡΠ°Π΄ΡΠ΅Ρ ΡΠΆΠ΅ ΡΠΎ, ΡΡΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΡΡΡ.
Π’Π°ΠΊ ΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΠΉΡΠ΅ΡΡ. Π§ΠΈΡΠ°ΠΉΡΠ΅ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ Π²Π½ΠΎΡΠΈΡΠ΅ ΡΠ²ΠΎΡ Π»Π΅ΠΏΡΡ. Π ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ»Ρ ΡΠ»ΡΠΆΠ΅ΡΡΡ ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΡΡΠ°ΠΊΠ°Π½ΠΈΡΡΡ, ΠΌΡ, Π΄ΠΎΠΊΡΠΎΡΠ°, ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ°Π³Π½ΠΎΠ·.
ΠΡΠΈΠ³ΠΈΠ½Π°Π» ΡΡΠ°ΡΡΠΈ ΠΈ Π°Π²ΡΠΎΡ
P.S. ΠΡΠΎ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ:
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Β ΡΠ°ΠΉΡΠ°Ρ ΠΌΠΎΠ³ΡΡ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Β ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π΄Π»ΡΒ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Β ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΠ°ΠΊ ΠΈΒ ΠΏΠΎΠ΄Β ΡΠΊΡΠ°Π½Ρ ΡΒ Π²ΡΡΠΎΠΊΠΈΠΌ DPI (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ΄Β Retina-Π΄ΠΈΡΠΏΠ»Π΅ΠΈ) Π΄Π»ΡΒ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΠ½ΠΈ ΠΏΠΎΒ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡΡ ΠΈΒ ΠΏΠΎΒ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠ΅ Π½Π°Β ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°ΠΌΡΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠ΅.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΒ ΡΠ°ΠΌΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄Π»ΡΒ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΠΈΠ±ΠΎΒ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠ°ΠΊ ΠΈΒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ, Π΅ΡΠ»ΠΈ Π½Π°ΠΌ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΡ ΠΏΠΎΠ΄Β Retina-Π΄ΠΈΡΠΏΠ»Π΅ΠΈ Π½Π΅Β Π½ΡΠΆΠ½Π°; Π»ΠΈΠ±ΠΎΒ Π²Β Π΄Π²Π°-ΡΡΠΈ ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½Π° Π°Π΄Π°ΠΏΡΠ°ΡΠΈΡ ΠΏΠΎΠ΄Β ΡΠΊΡΠ°Π½Ρ ΡΒ Π²ΡΡΠΎΠΊΠΈΠΌ DPI.
Π‘Π°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Β ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS Π²Β ΡΡΠΎΡΠΎΠ½Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ.
ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° β ΡΡΠΎΒ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΎΠ±ΡΡΠΌ ΡΡΠ°ΡΠΈΠΊΠ°, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄Π»ΡΒ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΡΒ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΠΎΠ»Π½ΠΎΡΠ²Π΅ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΆΠ΅ ΡΒ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ²Π΅ΡΠΎΠ² ΠΎΠ±ΡΡΠ½ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½Ρ Π΄Π°ΠΆΠ΅ Π²Β Π²ΡΡΠΎΠΊΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ.
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΒ JS-ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π½Π°Β ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅
ΠΡΠΈΒ ΠΏΠΎΠΌΠΎΡΠΈ JS ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ·Π½Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΒ DPI ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π°Β ΡΠΆΠ΅ ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ·Β ΡΡΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠΈΡΡ ΡΒ ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π΄Π°Π½Π½ΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΡΒ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ ΠΈ/ΠΈΠ»ΠΈ ΡΠΎΒ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ DPI Π½Π΅Β Π±ΡΠ΄ΡΡ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΈΠ·Π±ΡΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ: ΡΠ°ΠΊ ΠΈΒ ΡΡΠ°ΡΠΈΠΊ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡΡ, ΠΈΒ ΡΠ°ΠΉΡ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π±ΡΡΡΡΠ΅Π΅.
Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΒ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠΎΠ±ΡΡΠΈΡ JavaScript, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΒ ΠΈΠ½ΠΈΡΠΈΠΈΡΡΠ΅ΡΡΡ ΠΏΡΠΈΒ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΒ ΠΊΠΎΡΠΎΡΠΎΠ΅ Β«ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅ΡΒ» Π²Β src-Π°ΡΡΡΠΈΠ±ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΡΡΠ»ΠΊΡ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΡ ΠΈΠ·Β ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ (ΠΎΠ±ΡΡΠ½ΠΎ Ρ ΡΠ°Π½ΠΈΠΌΠΎΠΉ Π²Β data-Π°ΡΡΠΈΠ±ΡΡΠ΅ ΡΠ΅Π³Π° img) ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²Β ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»ΡΒ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½ΡΠΆΠ½ΡΡ Π΄Π°Π½Π½ΡΡ ΠΎΠ±Β ΡΠΊΡΠ°Π½Π΅.
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΡΠΌ Ρ ΡΠ°Π½ΠΈΠΌΡΡ Π²Π΅ΡΡΠΈΠΉ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ, ΡΠ»ΠΎΠΆΠ½Π΅Π΅ Π²Β ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ (ΠΊΠ°ΠΊ Π±Π΅ΠΊΠ΅Π½Π΄Π°, ΡΠ°ΠΊ ΠΈΒ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π°), Π°Β ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π½Π°Π»ΠΈΡΠΈΡ JS Π½Π°Β ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°.
Π’Π°ΠΊΠΆΠ΅ Π²Β Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΊΡΠΎΠΌΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° ΡΡΠΎΠΈΡ ΡΡΠΈΡΡΠ²Π°ΡΡ Π΅ΡΠ΅ ΠΈΒ ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΊΒ ΡΠ΅ΡΠΈ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅Β ΡΡΠΎΠΈΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Β Π²ΡΡΠΎΠΊΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ Π½Π°Β iPhone ΡΒ Retina-Π΄ΠΈΡΠΏΠ»Π΅Π΅ΠΌ, Π΅ΡΠ»ΠΈ ΡΡΠΎΡ ΡΠΌΠ°ΡΡΡΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ edge Π΄Π»ΡΒ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΡΒ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ).
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΒ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π½Π°Β Π±ΡΠΊΠ΅Π½Π΄Π΅
ΠΡΠΈΒ ΠΏΠ΅ΡΠ²ΠΎΠΌ Π·Π°ΠΏΡΠΎΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Β«Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡΒ» ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° ΠΈΒ ΠΏΡΠΈΒ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡ ΡΡΠ°Π·Ρ ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΡΡ Β«ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅Β» ΡΡΡΠ»ΠΊΠΈ Π½Π°Β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ»ΡΒ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡ ΡΠΎΠΆΠ΅ ΡΠ°ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ JS, Ρ ΠΎΡΡ Π΄Π»ΡΒ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π·Π°ΠΏΡΠΎΡΠ° (ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΒ User Agent ΡΠ°ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ). Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π½Π°Β Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ Π·Π°ΠΏΡΠΎΡΠΎΠ², ΡΠΆΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅Β Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡΒ JS ΠΈΒ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Β Π»ΡΠ±ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Ρ ΠΎΡΡ Π²Β Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΎΠ½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅.
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΈΒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π±ΠΎΡΡ ΡΒ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ
ΠΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡ (ΠΈΒ Π΄ΠΎΒ ΡΠΈΡ ΠΏΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ) Π²ΠΎΒ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΈΠ·-Π·Π°Β ΡΠΎΠ³ΠΎ, ΡΡΠΎΒ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠΉ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅Β ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ»ΠΈ. Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΡ ΡΡΠ°Π»ΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΡΡΡΠ΅. ΠΒ HTML5Β ΡΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π°ΡΡΡΠΈΠ±ΡΡΡ srcset ΠΈΒ sizes, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ»ΠΎΠΊ Π½Π°Β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π°Β ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ ΡΠ΅Π³ picture, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°Π» Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ.
ΠΡΠΎΒ Π½Π΅Β ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Β Internet Explorer 11Β ΠΈΒ Π²Β Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ Π΅Π³ΠΎ Π²Π΅ΡΡΠΈΡΡ , Π½ΠΎΒ Π²ΠΎΒ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΆΠ΅ Π΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²Β ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΡΠ°Π½ ΠΠ°ΡΠΊΠΎΡΡ ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΈΠΊ ΡΠ΅ΡΠΌΠΈΠ½Π° Β«Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Β». Π ΡΠ²ΠΎΠΈΡ ΡΠ°Π±ΠΎΡΠ°Ρ ΠΎΠ½ Π·Π°ΡΠ²ΠΈΠ», ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ°ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΠΊΠ°ΠΆΡΡΡΡΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠΊΡΠ°Π½ΠΎΠ², Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½ΠΎΠ² ΡΡΡΡΠΎΠΉΡΡΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠΎ ΠΏΠ»ΠΎΡ Π°Ρ Π½ΠΎΠ²ΠΎΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌ ΡΡΠ°ΡΠΈΠΊΠΎΠΌ. Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ Β«ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌΒ» Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ.
ΠΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΠΌΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΡΡΠ΅Π΄ΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ .
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Bootstrap 3
ΠΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°ΠΉΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ boostrap 3 ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² Π²Π΅ΡΡΡΠΊΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΈΠΌ css ΠΊΠ»Π°ΡΡ .img-responsive
. ΠΡΠΎΡ ΠΊΠ»Π°ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠ»Π°Π²ΠΈΠ»Π° max-width: 100%;
,Β height: auto;
ΠΈΒ display: block;
. Π¨ΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° Π²ΡΡΠΎΡΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΠΎΠ±Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
<img src="..." alt="Responsive image">
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² html
ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄ΡΡΠΈΠΉ ΡΡΠ°Π½Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <picture> ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ breakpoint, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°Ρ Π²Π΅ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
<picture> <source srcset="large-1.jpgΒ 1x,Β large-2.jpgΒ 2x" media="(min-width:Β 45em)" /> <source srcset="med-1.jpgΒ 1x,Β med-2.jpgΒ 2x" media="(min-width:Β 18em)" /> </picture>
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠΎΠΊΠ° Π΅ΡΠ΅ Π½Π΅ Π½Π°ΡΠ»ΠΈ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΡΠΈΠ» Π±Ρ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ. ΠΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Ρ Π°ΡΠ°ΠΊΡΠ΅Ρ, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· Π½ΠΈΡ Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°, ΡΠ°ΠΊ ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ.
ΠΡΠ»ΠΈ ΠΆΠ΅ Π²Π°ΠΌ Π½Π΅ Π½ΡΠ°Π²ΡΡΡΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΆΠ΄Π°ΡΡΡΡ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π»ΠΈΠ·Π° ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <picture>.
Β
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½Ρ. Π Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΠΎΠΌ ΡΠ°ΠΉΡΠ΅, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΠΈΡΡΡΡ Π΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΠΌΠΈ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠ°ΡΡ Π½Π΅Π΄Π΅Π»Ρ Π½Π°Π·Π°Π΄ Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π» ΠΎΠ±ΡΡΠ°ΡΡΠ΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π³ Π·Π° ΡΠ°Π³ΠΎΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ. Π Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ. ΠΠΎ Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ·Π½Π°Π΅ΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ, ΠΈ Ρ ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ ΠΈΡ ΡΠ΅ΡΠΈΡΡ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ?
Π‘Π΄Π΅Π»Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π½ΡΠΌ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΠΎΠ³Π΄Π° Π²Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΠΎΠ±Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Ρ ΡΠΈΡΠΈΠ½Ρ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.Π’ΠΎΠ³Π΄Π° Π²ΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ.
ΠΠ°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ Π²Ρ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΈΡΠΈΠ½Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ΅Π½Ρ, Π° Π½Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ.
img {
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ.
img {
ΡΠΈΡΠΈΠ½Π°: 50%;
}
ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 50%.Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΠ΄Π΅Π»Π°Π΅Ρ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΠΌΠΈ, ΠΈ ΠΎΠ½ΠΈ ΡΠΌΠΎΠ³ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°.
Π‘ΡΠΎΠΈΡ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ?
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π²ΠΎΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ½Π΅ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π·Π°Π΄Π°ΡΡ, — ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ Π½Π΅Ρ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ — Π΅ΡΠ΅ ΠΎΠ΄Π½Π° Π²Π°ΠΆΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ CSS, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ. Π― Π½Π΅ Π±ΡΠ΄Ρ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π·Π΄Π΅ΡΡ, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠΎΠΉ ΠΏΠΎΡΡ ΠΏΠΎΠ·ΠΆΠ΅, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ.
ΠΡΠ²Π΅Ρ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ: Β«ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²Β».ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π»ΠΎ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 50% Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠΌ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΏΠΎΠΌΠΎΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²:
@media only screen ΠΈ (max-width: 480px) {
img {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
}
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° Π»ΡΠ±ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΌΠ΅Π½Π΅Π΅ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΈΠ΄Π΅ΠΎΠ²Π΅ΡΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ° Π½ΠΈΠΆΠ΅:
ΠΠΎΡΠ΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ΅Π΅?
ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±, ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, — ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° Π»ΡΡΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΠ½Π°ΡΠ°Π»Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ max-width ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Π΅ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ max-width (Π½ΠΎ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅).
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΡΠ°Π·ΠΌΠ΅Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅Π³ΠΎ 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ°:
img {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%;
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; // ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ, ΡΡΠΎ ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
}
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ Π½Π° 100%, ΡΡΠΎ ΡΠΆΠΈΠΌΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄ΠΎ 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
Π₯ΠΎΡΠΎΡΠΎ ΡΠΎ, ΡΡΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠ»Π°Π²Π½ΡΠΌ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΌΠ΅Π½ΡΡΠ΅ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° Π±ΡΠ΄Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠ΅ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π½Π°ΡΡΡΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΎ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ½ΠΎΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width.
Π ΡΡΠΎ Π½Π°ΡΡΠ΅Ρ Π²ΡΡΠΎΡΡ?
ΠΡΡΠ³Π°Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ, ΡΠ²ΡΠ·Π°Π½Π° ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Π²ΡΡΠΎΡΡ.ΠΠ±ΡΡΠ½ΠΎ Π²ΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²ΡΡΠΎΡΡ Π²Π°ΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ (ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΊΠ°ΠΊ Π±Ρ Π»ΠΎΠΌΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅).
ΠΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ. ΠΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠ½ΠΎ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, Π½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ.
img {
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ CSS ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡβ¦
Π Π΅ΡΠ΅Π½ΠΈΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Object-Fit
Π§ΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π²Π°ΡΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ object-fit.ΠΠ°Π²Π°ΠΉΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈ ΠΏΡΠΈΡΠ²ΠΎΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ»ΡΡΡΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
img {
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ: ΠΊΡΡΡΠΊΠ°;
ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ°: ΡΠ½ΠΈΠ·Ρ;
}
ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-position (Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ object-fit), ΡΡΠΎΠ±Ρ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ Π½Π΅ Π·Π½Π°ΡΡ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ, Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎΡ ΠΏΠΎΡΡ ΠΏΠΎΠΌΠΎΠ³ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡΡ ΠΈ ΡΠ΅ΡΠΈΡΡ Π²Π°ΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΠΌΠΎΠΉ ΠΊΠ°Π½Π°Π» Π½Π° Youtube.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅!
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΠ·ΡΡΠΈΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ·Π½Π°Π΅ΠΌ ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΠΈΠΌΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠΊΡΠ°Π½Π°, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ — ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ HTML ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π»Ρ ΠΈΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ — ΡΡΠΎ Π»ΠΈΡΡ ΡΠ°ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π±ΡΠ΄ΡΡΠ°Ρ ΡΠ΅ΠΌΠ° CSS, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠ·ΡΡΠΈΡΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ. Π’ΠΈΠΏΠΈΡΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡ Π³Π΄Π΅-ΡΠΎ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΎ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΡΠΈΡΠΎΠΊΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, ΡΠ°ΠΊΠΎΠΌ ΠΊΠ°ΠΊ Π½ΠΎΡΡΠ±ΡΠΊ ΠΈΠ»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ (Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π²ΠΆΠΈΠ²ΡΡ ΠΈ Π½Π°ΠΉΡΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° Github.Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠ±ΡΡΠΆΠ΄Π°ΡΡ CSS, ΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ:
- ΠΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ΅Π»Π° Π·Π°Π΄Π°Π½Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ — Π² ΠΎΠΊΠ½Π°Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²ΡΡΠ΅ ΡΡΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠ΅Π»ΠΎ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ Π² Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅. Π ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½ΠΈΠΆΠ΅ ΡΡΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠ΅Π»ΠΎ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π° 100% ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ°ΠΊ, ΡΡΠΎ Π΅Π³ΠΎ ΡΠ΅Π½ΡΡ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΡΠ΅Π½ΡΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. ΠΡΠ»ΠΈ ΡΠ°ΠΉΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠ·ΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π΅, Π²Π°ΠΆΠ½Π°Ρ Π΄Π΅ΡΠ°Π»Ρ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π»ΡΠ΄ΠΈ) Π²ΡΠ΅ Π΅ΡΠ΅ Π²ΠΈΠ΄Π½Π°, Π° ΠΈΠ·Π»ΠΈΡΠΊΠΈ ΡΠ΅ΡΡΡΡΡΡ Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½.ΠΠ³ΠΎ Π²ΡΡΠΎΡΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π°ΡΡΡΠΎΠ΅Π½Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅Π»Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°ΡΠΈΠ½Π°ΡΡ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ, ΡΠ°ΠΊ ΡΡΠΎ ΠΎΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π»Π°, Π° Π½Π΅ Π²ΡΡ ΠΎΠ΄ΡΡ Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ.
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠ°ΠΉΡ Π½Π° ΡΠ·ΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½ΠΈΠΆΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, Π½ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΎΠ½ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ Π²ΡΡΠΎΡΡ ΡΠΊΡΠ°Π½Π°. Π ΠΏΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΡΡΠ΄Π½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π»ΡΠ΄Π΅ΠΉ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
Π£Π»ΡΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ ΡΠΎΡΡΠΎΡΡΡ Π² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π²Π°ΠΆΠ½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΠΉΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠ·ΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π΅. ΠΡΠΎΡΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Ρ ΡΠΊΡΠ°Π½ΠΎΠΌ ΡΡΠ΅Π΄Π½Π΅ΠΉ ΡΠΈΡΠΈΠ½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅. ΠΡΠΎ ΡΠΈΡΠΎΠΊΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ ΠΊΠ°ΠΊ Π·Π°Π΄Π°ΡΠ° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΡΠΊΡΡΡΡΠ²Π° .
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°. Π Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΡΠ°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π·Π΅ΡΠ½ΠΈΡΡΡΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ (ΡΠ°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ — ΡΡΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²ΡΡΠΎΡΡ, ΠΊΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½Π° Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ).ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ .
Π Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ΠΌ, ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΎΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠΎΡΠ΅ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ; Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π΅ Ρ ΠΎΡΡΡ ΡΡΠ°ΡΠΈΡΡ Π²ΠΏΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ, Π·Π°Π³ΡΡΠΆΠ°Ρ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. Π ΠΈΠ΄Π΅Π°Π»Π΅ Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΏΠΎΠ»ΡΡΠ°ΡΡΠ΅Π³ΠΎ Π΄ΠΎΡΡΡΠΏ ΠΊ Π΄Π°Π½Π½ΡΠΌ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
Π§ΡΠΎΠ±Ρ ΡΡΠ»ΠΎΠΆΠ½ΠΈΡΡ Π·Π°Π΄Π°ΡΡ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Ρ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ΅Π±ΡΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΎΡ ΠΈΡ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎ ΡΡΡΠΈ, ΡΡΠΎ ΡΠ° ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Π½ΠΎ Π² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΡΠ°Ρ ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΈ ΠΎΠ½ΠΈ ΡΠ΅ΡΠ°ΡΡ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ — ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π° ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ, ΠΈ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π½Π΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΈΠΏΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠ·ΠΎΡΠΎΠ², ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ Ρ. Π., Π½ΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π΄Π΅ΡΠ°Π»ΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π½Π° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ. Π€ΠΎΡΠΌΠ°ΡΡ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ JPEG, Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
Π’Π°ΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π»ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ, Π² Π½Π°ΡΠ°Π»Π΅ ΠΈ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ 90-Ρ — ΡΠΎΠ³Π΄Π° Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ Π±ΡΠ»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ Π΄Π°ΠΆΠ΅ Π½Π΅ Π΄ΡΠΌΠ°Π»ΠΈ ΠΎΠ± ΡΡΠΎΠΌ. ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ. Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΈ Π½Π΅Π΄Π°Π²Π½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²Π°ΠΌ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΠΈΠ±ΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅, Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΡΠ°Π·Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ( ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ), Π»ΠΈΠ±ΠΎ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠ΅ Π΄Π»Ρ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ( Π°ΡΡ-Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΠΌΡΠ΅ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ — srcset
/ sizes
/
— Π²ΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² Π²ΡΠΏΡΡΠΊΠ½ΡΡ
Π²Π΅ΡΡΠΈΡΡ
ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Π²ΠΊΠ»ΡΡΠ°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Microsoft Edge, Π½ΠΎ Π½Π΅ Internet Explorer. )
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄Π²Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π²ΡΡΠ΅, ΠΈ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΈΡ
ΡΠ΅ΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ HTML. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° HTML
s Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°, ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° — ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΡΠ°ΠΉΡΠ° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΡ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS. .ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ CSS Π΅ΡΡΡ Π»ΡΡΡΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ΅ΠΌ Ρ HTML, ΠΈ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π½ΠΈΡ
Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ CSS.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ: ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ
ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΡΠ΅ΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ? ΠΡ Ρ
ΠΎΡΠΈΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° — ΡΡΠΎ ΡΠΈΡΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎ Π²ΡΠΎΡΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΡΠ°ΠΉΠ»:
ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π° Π½ΠΎΠ²ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠ° — srcset
ΠΈ sizes
— ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΎΠ³ΠΎ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ responseive.html Π½Π° Github (ΡΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄):
ΠΡΡΠΈΠ±ΡΡΡ srcset ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ, Π½ΠΎ ΠΈΡ
Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅ΡΠ΅ ΠΈΡ
, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π²ΡΡΠ΅, Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°ΡΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠ° Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅.ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΏΠΈΡΠΎΠΊ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π·Π°ΠΏΡΡΡΠΌΠΈ, ΠΈ ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΠ°ΡΡΡ ΡΡΠΈΡ
ΡΠΏΠΈΡΠΊΠΎΠ² ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΡΠ΅Ρ
ΡΠ°ΡΡΠ΅ΠΉ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠ±Π΅ΠΆΠΈΠΌΡΡ ΠΏΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ:
srcset
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½Π°Π±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ±ΠΈΡΠ°ΡΡ, ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ± ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ Π·Π°ΠΏΡΡΠΎΠΉ. ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΈΡΠ΅ΠΌ:
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π° (
elva-fairy-480w.jpg
) - ΠΠΎΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
- ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
(
480w
) — ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π±Π»ΠΎΠΊw
, Π° Π½Π΅ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡΡ.ΠΡΠΎ ΡΠ΅Π°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ, ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π² ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° Mac Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Finder ΠΈ Π½Π°ΠΆΠ°ΡΡ Cmd + I , ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠΊΡΠ°Π½).
sizes
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π½Π°Π±ΠΎΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°) ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ±ΡΠ°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π²Π΅ΡΠ½Ρ — ΡΡΠΎ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΡΠ°Π½Π΅Π΅. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°ΠΏΡΡΠΎΠΉ ΠΏΠΈΡΠ΅ΠΌ:
- A media condition (
(max-width: 600px)
) — Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΠ΅ΠΌΠ΅ CSS, Π½ΠΎ ΠΏΠΎΠΊΠ° Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°ΠΆΠ΅ΠΌ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ° ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΊΡΠ°Π½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π².Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ Β«ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅Β». - ΠΠΎΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
- Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½ΠΎΡΠΈΡΠ΅Π»Ρ ΠΈΡΡΠΈΠ½Π½ΠΎΠ΅ (
480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : ΠΠ»Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π΄Π»ΠΈΠ½Ρ ( ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ,
, em
) ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ( vw
), Π½ΠΎ Π½Π΅ ΠΏΡΠΎΡΠ΅Π½ΡΡ. ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»ΠΎΡΠ° Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π½ΠΎΡΠΈΡΠ΅Π»Ρ (ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π½ΠΎΡΠΈΡΠ΅Π»Ρ Π½Π΅ ΠΈΡΡΠΈΠ½Π½ΠΎ).ΠΡΠ°ΡΠ·Π΅Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π²ΡΠ΅, ΡΡΠΎ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΡΠ»ΠΎΠ²ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π±ΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ ΠΏΡΠΈ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°.
ΠΡΠ°ΠΊ, Ρ ΡΡΠΈΠΌΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ:
- ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
- ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅, ΠΊΠ°ΠΊΠΎΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ Π½ΠΎΡΠΈΡΠ΅Π»Ρ Π² ΡΠΏΠΈΡΠΊΠ΅
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ. - ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»ΠΎΡΠ° Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°.
- ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² ΡΠΏΠΈΡΠΊΠ΅
srcset
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎ ΠΈ ΡΠ»ΠΎΡ, ΠΈΠ»ΠΈ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅Ρ, ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΡΠ°.
Π Π²ΡΠ΅! ΠΠ° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠ»ΠΎΠ²ΠΈΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° (max-width: 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
Π±ΡΠ΄Π΅Ρ ΠΈΡΡΠΈΠ½Π½ΡΠΌ, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±Π΅ΡΠ΅Ρ ΡΠ»ΠΎΡ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
. ΠΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ elva-fairy-480w.jpg
, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ( 480w
) Π±Π»ΠΈΠΆΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»ΠΎΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ 128 ΠΠ Π½Π° Π΄ΠΈΡΠΊΠ΅, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π²Π΅ΡΡΠΈΡ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅Π³ΠΎ 63 ΠΠ — ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ 65 ΠΠ. Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΡΠ»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΌΠΎΠΆΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : ΠΏΡΠΈ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ·ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΎΠΊΠ½ΠΎ Π½Π° ΡΠ°ΠΌΡΡ ΡΠ·ΠΊΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΡΡ ΡΡΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ JavaScript Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π°Π±ΡΠ°Π² document.querySelector ('html'). clientWidth
). Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π΄ΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°, ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΈΡΠ΅, ΡΠ΅ΠΌ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅.ΠΡΠΈ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ Firefox about: debugging
page, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ².
Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΈ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«Π‘Π΅ΡΠ΅Π²ΠΎΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡΒ» Firefox DevTools.
Π‘ΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΏΡΠΎΡΡΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ ΠΈΡ
. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π±ΡΠ΄ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ src
, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : Π²
ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΡΡΠΎΠΊΡ
: ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΈΡ
ΡΠ΅Π°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ (Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π»Π³ΡΡ ΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΆΠΈΠΌΠ°ΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, ΡΡΠΎ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°).
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ: ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΊΡΠ°Π½Π°, Π½ΠΎ Π²ΡΠ΅ Π²ΠΈΠ΄ΡΡ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ srcset
Ρ x-Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠ°ΠΌΠΈ ΠΈ Π±Π΅Π· ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
— Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ! ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π² srcset-resolutions.html (ΡΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄):
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ CSS-ΠΊΠΎΠ΄, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π½Π° ΡΠΊΡΠ°Π½Π΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ»Π° 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΡ CSS-ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ):
img {
ΡΠΈΡΠΈΠ½Π°: 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π·ΠΌΠ΅ΡΡ
Π½Π΅ Π½ΡΠΆΠ½Ρ — Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, Π² ΠΊΠ°ΠΊΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ, ΠΈ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² srcset
.ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, ΠΎΠ±ΡΠ°ΡΠ°ΡΡΠ΅Π΅ΡΡ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ / Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΈΠΊΡΠ΅Π»Ρ CSS, Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ elva-fairy-320w.jpg
(ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ 1x, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ.) ΠΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΠΊΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π΄Π²Π° ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° ΠΏΠΈΠΊΡΠ΅Π»Ρ CSS ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅, Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ elva-fairy-640w.jpg
. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 640 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 93 ΠΠ, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ — Π²ΡΠ΅Π³ΠΎ 39 ΠΠ.
Π₯ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅
ΠΠ°ΠΏΠΎΠΌΠ½ΠΈΠΌ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½ΡΠΉ ΡΠ½ΠΈΠΌΠΎΠΊ Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°. ΠΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΠΈ ΡΡΡΠ΄Π½ΠΎΡΠ°Π·Π»ΠΈΡΠΈΠΌΡΠΌ. ΠΠ΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ»ΠΎ Π±Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΠ΅Π»Π΅ΡΠΎΠ½Π΅ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ°Π΅Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ not-responsive.html, Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ Π² Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ:
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈΡΠΏΡΠ°Π²ΠΈΠΌ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
! ΠΠΎΠ΄ΠΎΠ±Π½ΠΎ ΠΈ
, ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ Π½Π° Π²ΡΠ±ΠΎΡ, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΡΠΉ < img>
ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠΎΠ΄ Π² responseive.html Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
<ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°>
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ Π°ΡΡΠΈΠ±ΡΡmedia
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° — ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅srcset
, ΡΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ ΡΠ΅ΡΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΡΠ°ΡΡ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ — Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π΅ΡΠ½Π΅Ρ ΠΈΡΡΠΈΠ½Ρ . Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 799 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠΎΡΠΎΠΉ. -
srcset ΠΡΡΠΈΠ±ΡΡΡ
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΏΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π²ΡΡΠ΅ Ρ
ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡsrcset
ΡΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ Π°ΡΡΠΈΠ±ΡΡsizes
. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° - ΠΠΎ Π²ΡΠ΅Ρ
ΡΠ»ΡΡΠ°ΡΡ
Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
src
ΠΈalt
, ΠΏΡΡΠΌΠΎ ΠΏΠ΅ΡΠ΅Π΄
), ΠΈ ΡΠ΅Π·Π΅ΡΠ² Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π½Π° ΡΠΈΡΠΎΠΊΠΎΡΠΎΡΠΌΠ°ΡΠ½ΡΡ , ΡΠ°ΠΊ ΠΈ Π½Π° ΡΠ·ΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : Π°ΡΡΠΈΠ±ΡΡ media
ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΡΠ΅Π½Π°ΡΠΈΡΡ
Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ; ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π½ΠΎΡΠΈΡΠ΅Π»Ρ
, Π½Π΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»Ρ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π°ΡΡΠΈΠ±ΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
.
ΠΠΎΡΠ΅ΠΌΡ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈΠ»ΠΈ JavaScript?
ΠΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ½ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ (ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ) Π»ΡΠ±ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π°Π½Π°Π»ΠΈΠ·Π°ΡΠΎΡ Π½Π°ΡΠ°Π» Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ CSS ΠΈ JavaScript ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎΡ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌ Π² ΡΠ΅Π»ΠΎΠΌ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΎΡΡΡΠ΄Π° Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°ΠΊΠΈΡ
ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊ srcset
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
, Π·Π°ΡΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΌΠ΅Π½ΡΡΠ΅Π΅.Π ΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ Π±Ρ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ, ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΠΈ Π±Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎ Π΅ΡΠ΅ Ρ
ΡΠΆΠ΅ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘ΠΌΠ΅Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠΎΠ²ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ WebP ΠΈ AVIF, ΠΌΠΎΠ³ΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ°Π»ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π° ΠΈ Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ. ΠΡΠΈ ΡΠΎΡΠΌΠ°ΡΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΎΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π½ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ Β«ΠΈΡΡΠΎΡΠΈΡΠ΅ΡΠΊΡΡ Π³Π»ΡΠ±ΠΈΠ½ΡΒ».
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΠΏΡ MIME Π²Π½ΡΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΡΠΈΠΏΠ°
, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠ³ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΎΡΠΊΠ»ΠΎΠ½ΠΈΡΡ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠΈΠΏΡ ΡΠ°ΠΉΠ»ΠΎΠ²:
<ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°>
- ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π»ΠΈ , Π° Π½Π΅ , Π°ΡΡΠΈΠ±ΡΡ
media
, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅. - Π ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ»Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΠΏΠ°, ΠΎΠ±ΡΡΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²type
. - ΠΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π·Π°ΠΏΡΡΡΠΌΠΈ, Ρ
srcset
ΠΈΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ
.
ΠΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ Π²Ρ ΠΏΡΠΎΡΠ²ΠΈΡΠ΅ ΡΠΌΠ΅Π»ΠΎΡΡΡ ΠΈ ΠΏΠΎΠΉΠ΄Π΅ΡΠ΅ Π² ΠΎΠ΄ΠΈΠ½ΠΎΡΠΊΡ … Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ. ΠΡ Ρ
ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ Π²Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ½ΠΈΠΌΠΎΠΊ Ρ ΡΠ·ΠΊΠΈΠΌ / ΡΠΈΡΠΎΠΊΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ Ρ Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
, ΠΈ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ srcset
.
- ΠΠ°ΠΏΠΈΡΠΈΡΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ HTML-ΠΊΠΎΠ΄, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π²Π°Ρ ΠΊΠΎΠ΄ (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
not-responseive.html
Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅). - ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΡΠΈΡΠΎΠΊΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π΄Π΅ΡΠ°Π»ΡΠΌΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌΠΈΡΡ Π² Π½Π΅ΠΌ.Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΅Π³ΠΎ Π²Π΅Π±-Π²Π΅ΡΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, Π·Π°ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΆΡΡΠ΅ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΌΠ΅Π½ΡΡΡΡ ΡΠ°ΡΡΡ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ Π΄Π΅ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ, ΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π²ΡΠΎΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠΎΠ»ΠΎ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
srcset
/size
, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΡΠΈ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΡ Π΄ΠΎΡΠ»ΠΈ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΎΡΠ΅Π½ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ ΡΡΠΈ Π½Π°Π²ΡΠΊΠΈ, Π² ΠΊΠΎΠ½ΡΠ΅ ΠΌΠΎΠ΄ΡΠ»Ρ; ΡΠΌ. Π·Π°ΡΡΠ°Π²ΠΊΡ Mozilla.
ΠΡΠΎ ΠΎΠ±Π΅ΡΡΠΊΠ° Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΌΡ Π½Π°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠΎ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ ΠΈΠ³ΡΠ°ΡΡ Ρ ΡΡΠΈΠΌΠΈ Π½ΠΎΠ²ΡΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ. ΠΠ°ΠΏΠΎΠΌΠ½ΠΈΠΌ, ΡΡΠΎ ΠΌΡ Π·Π΄Π΅ΡΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π΄Π²Π΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ:
- Art direction : ΠΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² — Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π΅ ΠΏΠΎΠ»Π½ΡΡ ΡΡΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π°, ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
- ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ : ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΡΠ·ΠΊΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠΌ Π½Π΅ Π½ΡΠΆΠ½Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ Π΄ΠΈΡΠΏΠ»Π΅ΠΈ, — Π° ΡΠ°ΠΊΠΆΠ΅, Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ / Π½ΠΈΠ·ΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΡΠΊΡΠ°Π½Π°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ SVG) ΠΈ
srcset
Ρ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈsizes
.
ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π²Π΅ΡΡΠ°Π΅Ρ Π²Π΅ΡΡ ΠΌΠΎΠ΄ΡΠ»Ρ Β«ΠΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΈ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅Β»! ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅, — ΡΡΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π½Π°ΡΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΠΎΡΠ΅Π½ΠΊΡ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ Ρ Π²Π°Ρ Π΄Π΅Π»Π°. ΠΠΎΠ²Π΅ΡΠ΅Π»ΠΈΡΡ!
html — ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π² CSS-Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΡΠΊΠ΅ ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΡΠΎΠ»Π±ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ΅ΠΊΡΡΠ°?
ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π»Π΅Π³ΠΊΠΎ … Π½ΠΎ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ½ΡΡΡ ΡΡΠΎ. Π― Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ. ΠΠ΅Π²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΡΠ°Π²ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ Ρ ΠΎΡΠ΅Π» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ flex, Π½ΠΎ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π²ΠΊΠ»ΡΡΠ°Ρ Π»ΠΈ Ρ Π΅Π³ΠΎ Π² HTML ΠΈΠ»ΠΈ ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Ρ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ img ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Ρ ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠΊΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ img ΡΠΎΠΆΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ. Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΌΠ½Π΅ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ (Ρ ΠΎΡΡ Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» width: 100%, height: auto ΠΈ max-width: 100%) Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.
Π ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ², ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ-ΡΠΎ, ΡΡΠΎ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ (Ρ ΠΌΠ΅Π½Ρ Π±ΡΠ΄ΡΡ ΠΌΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΠΊΡΡ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅-ΡΠ΅ΠΊΡΡ):
Π§ΡΠΎ Ρ Π·Π΄Π΅ΡΡ Π΄Π΅Π»Π°Ρ Π½Π΅ ΡΠ°ΠΊ? ΠΠΎΡ ΠΌΠΎΠΉ HTML-ΠΊΠΎΠ΄:
EB-6590
ΠΡΡΠ°Π²ΠΈΠ»
Π Π²ΠΎΡ (S) CSS:
* {
-webkit-box-sizing: border-box;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
.sh-ref-nfh3-container {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠΊΡΡΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 1366 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
.sh-ref-nfh3-content {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 100%;
ΡΠΎΡΡ: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 1366 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: -webkit-box;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: -ms-flexbox;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ;
-webkit-box-orient: Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ;
-webkit-box-direction: Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ;
-ms-flex-direction: ΡΡΠ΄;
flex-direction: ΡΡΠ΄;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.sh-ref-nfh3-left {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
Π³ΠΈΠ±ΠΊΠΎΡΡΡ: 0 0 50%;
Π³ΡΠ°Π½ΠΈΡΠ°: #eee solid 1px;
}
.sh-ref-nfh3-right {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
Π³ΠΈΠ±ΠΊΠΎΡΡΡ: 0 0 50%;
Π³ΡΠ°Π½ΠΈΡΠ°: #ccc solid 1px;
img {
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%;
}
}
}
}
https://codepen.io/binggeli/project/editor/ZpnRaB
html — ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ CSS; ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΆΠ°ΡΠΈΡ
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΌΠ°Π» (Ρ.Π΅.Π΅. ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΠΊΡΠ°Π½ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ). Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅: Β«Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΒ» Π΄Π»Ρ ΠΌΠ΅Π½Ρ, ΡΡΡΠ»ΠΊΠ° Π½Π° Π»ΠΎΠ³ΠΎΡΠΈΠΏ / Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈ Π·Π½Π°ΡΠΎΠΊ ΠΊΠΎΡΠ·ΠΈΠ½Ρ. ΠΠ°ΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠ³ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠ΅Π½Ρ ΠΈ ΠΊΠΎΡΠ·ΠΈΠ½Ρ, ΠΈ Ρ ΠΏΡΡΠ°ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Π° Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ, Π° Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ Π² ΠΌΠ°ΡΡΡΠ°Π±Π΅.
ΠΠ°ΡΠ΅Π½ΠΊΠ°:
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ>
CSS:
Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 10001;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #fff;
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ # cc0033;
Π²ΡΡΠΎΡΠ°: 48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠΊΡΡΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 100%;
}
Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ div.btn-home> a, img {
Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%;
}
div.btn-menu {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 48 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
div.btn-home {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 199 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
div.btn-basket {
ΡΠΈΡΠΈΠ½Π°: 60 ββΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
float: right;
Π΄ΠΎΠ»ΠΆΠ½ΠΎΡΡΡ:
}
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° Π² btn-menu ΠΈ btn-ΠΊΠΎΡΠ·ΠΈΠ½Π΅ ΠΏΡΠ΅Π΄Π½Π°ΠΌΠ΅ΡΠ΅Π½Π°, Ρ Π½Π΅ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΠ»ΠΈΡΡ, ΡΠΎΠ»ΡΠΊΠΎ btn-home Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΡΡΠ° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΡ ΡΠΊΡΠΈΠΏΠΊΠ° ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ.Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ ΡΠΈΡΠΈΠ½Ρ CSS, ΡΡΠΎΠ±Ρ ΠΈΠΌΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΆΠ°ΡΠΈΠ΅ ΠΏΠΎΡΡΠ° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π΅ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΎΡΡΠΎ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡΡΡ Π΄ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ. ΠΠ°ΡΠ°ΠΌΠ΅ΡΡ overflow: hidden ΠΎΡΠΊΠ»ΡΡΠ΅Π½, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, Π³Π΄Π΅ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΡΠ΅Π²ΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΏΠΎ ΠΈ srcset — Smashing Magazine
ΠΠ± Π°Π²ΡΠΎΡΠ΅
ΠΡΠΈΠΊ — Π΅Π²Π°Π½Π³Π΅Π»ΠΈΡΡ-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π² Cloudinary ΠΈ ΠΆΠΈΠ²Π΅Ρ Π½Π° ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎΠΌ ΠΎΡΡΡΠΎΠ²Π΅ ΠΡΠΊΠ°Ρ. ΠΠ½ Π»ΡΠ±ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΠ±ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· ΠΏΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°Π½ΠΈΠ΅ ΠΈ ΡΡΡΠΎΠΈΡΠ΅Π»ΡΡΡΠ²ΠΎ, Π° ΡΠ°ΠΊΠΆΠ΅β¦
ΠΠΎΠ»ΡΡΠ΅ ΠΎ
ΠΡΠΈΠΊ
β¬
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ ΠΌΡ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π»ΠΈ ΡΡΠ°ΡΡΡ ΠΎ Picturefill 2.0, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π» Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π‘Π΅Π³ΠΎΠ΄Π½ΡΡΠ½ΡΡ ΡΡΠ°ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΡΠ°ΡΡΡ Π’ΠΈΠΌΠ° Π Π°ΠΉΡΠ° ΠΈ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π΄ΡΡΠΎΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΈ srcset Ρ ΠΏΡΠΎΡΡΡΠΌΠΈ ΠΎΡΠΊΠ°ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². [ΠΠ΅Ρ ΠΏΡΠΈΡΠΈΠ½ ΠΆΠ΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ; ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡ
ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΠ΅Π½Ρ ΡΠΊΠΎΡΠΎ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌΠΈ ΠΈΠ· ΡΠ°ΠΌΡΡ
Π²Π°ΠΆΠ½ΡΡ
ΡΠ°ΡΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, Π½ΠΎ Π·Π° 25-Π»Π΅ΡΠ½ΡΡ ΠΈΡΡΠΎΡΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΠΎΠ½ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Ρ. ΠΡΠ΅ Π² Π½ΠΈΡ
Π±ΡΠ»ΠΎ ΡΠΏΠΎΡΠ½ΠΎ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ: ΠΈΡ
ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠΎΡΠΌΠ°Ρ ΠΈ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — Π²ΡΠ΅ ΡΡΠΎ Π²ΡΡΠ΅ΡΠ΅Π½ΠΎ Π² Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠ΅ src
.
Β«ΠΡΠ΅, ΡΡΠΎ Ρ ΡΠΊΠ°Π·Π°Π» Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π·ΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊ: ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ.β¦ Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΠΌΡΡ ΡΡΡΠ°Π½ΠΈΡ — ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡ. ΡΡΡΠ΄Π½ΠΎΡΡΠΈ, ΠΊ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ «.
— ΠΠΆΠΎΠ½ ΠΠ»Π»ΡΠΎΠΏΠΏ, ΠΠ°ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΠ²ΡΠΎΡΡ HTML Π½Π°ΡΠ°Π»ΠΈ ΠΏΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ ΠΎΡΡΡΠ°ΡΡ ΡΡΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΡΠ°Π½Ρ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΏΠΎΡΠ°Π·ΠΈΠ»ΠΈ ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ ΠΊΠ°ΠΊ ΡΠ°Π·-Π΄Π²Π°.ΠΠ²ΡΠΎΡΡ, ΠΆΠ΅Π»Π°Ρ, ΡΡΠΎΠ±Ρ ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΡΠ΅ΡΠΊΠΈΠΌΠΈ Π² ΠΎΠ³ΡΠΎΠΌΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ ΠΈ ββΠ½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π½Π°ΡΠ°Π»ΠΈ ΡΠ°ΡΡΡΠ»Π°ΡΡ Π²ΡΠ΅ΠΌ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ; ΡΡΠ΅Π΄Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°Π·Π΄ΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ; ΠΎΡΠ΅Π½Ρ ΡΠΌΠ½ΡΠ΅ Π»ΡΠ΄ΠΈ Π½Π°Π·Π²Π°Π»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Β«Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌΒ».
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΈ ΠΏΡΠ΅ΠΏΡΡΡΡΠ²ΠΈΠ΅ΠΌ Π½ΠΎΠΌΠ΅Ρ ΠΎΠ΄ΠΈΠ½ Π½Π° ΠΏΡΡΠΈ ΠΊ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΠΌΡΡ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡ — ΡΡΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ ΠΊΠ°ΠΊ Π²Π²Π΅ΡΡ , ΡΠ°ΠΊ ΠΈ Π²Π½ΠΈΠ·, ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡΡ ΠΊΠ°ΠΊ ΠΊ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡΠΌ, ΡΠ°ΠΊ ΠΈ ΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΡΠΎ ΡΠΊΠΎΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ.
ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎΠ»Π΅ΡΠ½ΠΈΡ
ΡΠΏΠΎΡΠΎΠ² ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ Π΄Π°Π΅Ρ Π°Π²ΡΠΎΡΠ°ΠΌ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΡΠΈΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΈΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄Π°Ρ Π²Π΅ΡΡΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅Π»Π°ΡΡ Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅ΠΉ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠΎΠ²Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π΄ΠΎΡΡΠΈΠ³Π»Π° ΡΠΈΡΠΎΠΊΠΎΠ³ΠΎ ΡΠΎΠ³Π»Π°ΡΠΈΡ ΠΈ Π²Π½Π΅Π΄ΡΡΠ΅ΡΡΡ Π² Chrome, Opera, Firefox ΠΈ Edge (ΡΡΡΠ»ΠΊΠ°) ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ ΠΏΠ΅ΡΠ°ΡΠ°Ρ.
ΠΠΎΡΠ° Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΈΠ·ΡΡΠ°ΡΡ ΡΡΠΎΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΡΠ΅ΠΉΡΠ°Ρ !
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ ( shiny! New! ), Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠ΅Π΄Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Ρ.Π΅.Π΅. ΡΠΏΠΎΡΠΎΠ±Ρ, ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- ΠΠ°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
ΠΈ
ΡΠ΅ΠΊ. ΠΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π½ΠΎ ΠΌΡ Π½Π΅ Ρ ΠΎΡΠΈΠΌ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠ²ΠΈΠ΄ΡΡ Π²ΡΠ΅ ΡΡΠΈ Π»ΠΈΡΠ½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. ΠΠ°Π·ΠΎΠ²Π΅ΠΌ ΡΡΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
. - ΠΡΠ»ΠΈ Π½Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ Π³ΠΈΠ±ΠΊΠΈΠΉ (Ρ. Π. ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ), Π½Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ΄ΡΡ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π΅ΠΌΡ. ΠΡ Π½Π°Π·ΠΎΠ²Π΅ΠΌ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
- ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΈ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΡΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½Ρ: ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ ΠΎΠ±Π΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ , ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΈΡΡ. ΠΡ Π½Π°Π·ΠΎΠ²Π΅ΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π΅ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
- ΠΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ, Π²ΡΡ ΠΎΠ΄ΡΡΠΈΠΌΠΈ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ Π·Π°Ρ ΠΎΡΠΈΠΌ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ»Π΅Π³ΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅. ΠΡ Π½Π°Π·ΠΎΠ²Π΅ΠΌ ΡΡΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π°ΡΡ-Π΄ΠΈΡΠ΅ΠΊΡΠΈΠΈ.
- ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΡΠ°Π·Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ Π·Π°Ρ ΠΎΡΠΈΠΌ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ WebP, Π² Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ, ΠΈ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΊ Π½Π°Π΄Π΅ΠΆΠ½ΡΠΌ ΡΡΠ°ΡΡΠΌ ΡΠ°ΠΉΠ»Π°ΠΌ JPEG Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΎΠ³ΠΎ Π½Π΅ Π΄Π΅Π»Π°ΡΡ. ΠΡ Π½Π°Π·ΠΎΠ²Π΅ΠΌ ΡΡΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΈΠΏΠΎΠ².
ΠΠΎΠ²Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΠΈΡ
ΡΠ»ΡΡΠ°Π΅Π². ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° Π½ΠΈΡ
ΠΏΠΎ ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ.
ΠΠ΅ΡΠ΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ°Π·Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΡ ) Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½Π°.ΠΡ, Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅Ρ. (ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΎ)
Π£ΡΡΡΠΎΠΉΡΡΠ²ΠΎ
Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
Π‘ΡΠ΅Π½Π°ΡΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ ΠΏΡΠΎΡΡΠΎ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΠ΅ΠΌΡΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
ΡΠ΅ΠΊ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°Π΅Ρ Π½ΠΎΠ²Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π΄Π»Ρ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠΈ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ: Π°ΡΡΠΈΠ±ΡΡ srcset
.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π½Π°Ρ Π΅ΡΡΡ Π΄Π²Π΅ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
-
small.jpg
(320 Γ 240 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) -
large.jpg
(640 Γ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΡ Ρ
ΠΎΡΠΈΠΌ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ large.jpg
ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Ρ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ srcset
, ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΠΈΠΌ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΡΡΠΈΠ±ΡΡ srcset
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΏΠΈΡΠΎΠΊ URL-Π°Π΄ΡΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ
Π·Π°ΠΏΡΡΡΠΌΠΈ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠΌΠ΅Π΅Ρ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡ x
, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ ΡΡΠΎΡ ΡΠ°ΠΉΠ».
src
ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ srcset
. Π Π°Π·ΡΠΌΠ΅Π΅ΡΡΡ, alt
Π²ΠΊΠ»ΡΡΠ΅Π½ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° Π΄Π°ΡΡ Π½Π°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ΅ΡΠΊΠΈΠΌ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ Π΄Π΅Π³ΡΠ°Π΄ΠΈΡΡΠ΅Ρ Π²ΠΏΠ»ΠΎΡΡ Π΄ΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΏΠΎΡΡΠ΅ΠΏΠ°Π½Π½ΡΠΉ!
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
ΠΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΠΆΠΈΠΌΠ°ΡΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅.ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ.
ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΡΡΠΎ, ΠΏΠΎ ΡΠ»ΠΎΠ²Π°ΠΌ Π‘ΡΠΈΠ²Π° Π‘ΠΎΠ΄Π΅ΡΡΠ°, Β«ΡΠ°ΠΌΠΎΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π·Π° Π²ΡΡ Π΅Π³ΠΎ ΠΈΡΡΠΎΡΠΈΡΒ». ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎ ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΠΌΡΠΌΠΈ ΡΡΠΆΠ΅Π»ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅; Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΡΠ΅Π΅ Π² ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ°Ρ Π²ΡΠ΅Ρ . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, — ΠΏΡΠΎΡΠΊΠ°Π½ΠΈΡΡΠ΅Ρ HTML Π½Π° ΠΏΡΠ΅Π΄ΠΌΠ΅Ρ URL-Π°Π΄ΡΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π½Π°ΡΠ½Π΅Ρ ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΡ. ΠΡΠ°ΡΠ·Π΅Ρ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ Π·Π°Π΄ΠΎΠ»Π³ΠΎ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΡΡΡΠΎΠΈΡ DOM, Π·Π°Π³ΡΡΠ·ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ CSS ΠΈΠ»ΠΈ ΡΠ°ΡΠΊΡΠ°ΡΠΈΡ ΠΌΠ°ΠΊΠ΅Ρ.Π’ΠΎΠ³Π΄Π° ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΆΠΈΠ΄ΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΏΡΠΎΡΡΠΎ; Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±ΡΠ°Π» ΠΈΡΡΠΎΡΠ½ΠΈΠΊ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΎΠ½ ΡΠ·Π½Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π§ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ΅Π³Π΄Π° Π·Π½Π°Π΅Ρ, ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠ΅Π΄Ρ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π² : ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈ ΡΠΎΠΌΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡ Π½Π°ΡΠΈ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΊ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌ ΡΡΠ΅Π΄Π°ΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΠΎΠΉΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΏΠΎ ΡΡΠ½ΠΊΡΠΈΡΠΌ ΡΠ»ΡΠΈΠ΄-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π»ΠΎΡΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΊ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°ΠΌ.ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡ Π½Π°Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π²ΡΠ±ΠΎΡΠ° ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π½Π°Π΅Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠ±ΠΎΡΠ°, Π° Π½Π΅ Π½Π° ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ Π½Π΅ Π·Π½Π°Π΅Ρ.
Π Π°Π±ΠΎΡΠ° Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ Π½Π°ΡΡΠΎΡΡΠΈΠΌ ΠΊΠΎΡΠΌΠ°ΡΠΎΠΌ. ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΡΠ΅Π΄Π΅ — ΠΏΡΠΎΡΡΠΎ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ°ΡΡΠΈ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΏΡΠ°Π²Π΄Π°. (ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΎ)
ΠΠ°ΠΊ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ, ΡΡΠΎ ΠΏΠ»ΠΎΡ Π°Ρ ΠΈΠ΄Π΅Ρ. Π₯ΠΎΡΡ ΡΡΠΎ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΠΌΠΎ, Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈ ΡΡΠ΅Π²Π°ΡΠΎ ΠΎΡΠΈΠ±ΠΊΠ°ΠΌΠΈ.ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ !
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΡ ΡΠΎΠΎΠ±ΡΠ°Π΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½ΡΠΆΠ½ΠΎ (Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°, ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
) ΠΈ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ (Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠΎΠ² w
Π² srcset
), Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠΈΠ²ΠΈΠ°Π»ΡΠ½ΡΠΌ. ΠΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠΈΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ΅ΡΠΊΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎΡ Π±Π΅ΡΠΎΠ½, ΡΠ°Π·Π²ΠΈΠ²Π°Ρ Π½Π°Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ.ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠΈ Π²Π΅ΡΡΠΈΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
-
large.jpg
(1024 Γ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) -
medium.jpg
(640 Γ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) -
small.jpg
(320 Γ 240 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
Π ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ Π² Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠ΅ — ΡΠ΅ΡΠΊΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°, Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ° Π² Π±ΠΎΠ»ΡΡΠΈΡ ΠΎΠΊΠ½Π°Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΈΠΌΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ. (Π‘ΠΌ. ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ)
ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΎ ΠΎΡΠΌΠ΅ΡΠΈΠΌ:
ΠΡ ΡΠ½ΠΎΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ srcset
, Π½ΠΎ Π²ΠΌΠ΅ΡΡΠΎ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠΎΠ² x
ΠΌΡ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΡ w
ΠΊ Π½Π°ΡΠΈΠΌ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°ΠΌ. ΠΠ½ΠΈ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
. ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Π²Ρ Β«Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°β¦Β» Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 1024 Γ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎ ΠΎΡΠΌΠ΅ΡΡΡΠ΅ ΡΡΠΎΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ Π² srcset
ΠΊΠ°ΠΊ 1024w
.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ .ΠΠΎΡΠ΅ΠΌΡ ΡΠΎΠΆΠ΅ Π½Π΅ Π²ΡΡΠΎΡΡ? ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ; ΠΈΡ ΡΠΈΡΠΈΠ½Π° ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Π΅ΡΡΡ CSS, Π° Π²ΡΡΠΎΡΠ° — Π½Π΅Ρ. ΠΠΎΠ΄Π°Π²Π»ΡΡΡΠ΅Π΅ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π΄ΠΈΠΊΠΎΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΡ, ΡΠ°Π±ΠΎΡΠ°Ρ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ. ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΠΊΠΈΡ ΠΏΡΠΈΡΠΈΠ½ Π΄Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ, Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅Ρ.
ΠΡΠ°ΠΊ, ΡΡΠΎ w
Π² srcset
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½Π°ΡΠΈΡ
ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ . ΠΠ°Π»Π΅Π΅, Π°ΡΡΠΈΠ±ΡΡ sizes
.ΠΡΡΠΈΠ±ΡΡ sizes
ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½ΡΠΆΠ½ΠΎ , ΠΎΠΏΠΈΡΡΠ²Π°Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
ΠΊΠ°ΠΊ ΠΎ ΡΠΏΠΎΡΠΎΠ±Π΅ Π΄Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π½ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΌΠΎΠ³ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ CSS ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡ Π΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ, ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π΄Π»ΠΈΠ½Ρ CSS, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ»ΠΈΠ½Π° CSS ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 99px
ΠΈΠ»ΠΈ 16em
) ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ( 33.3vw
, ΠΊΠ°ΠΊ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅). ΠΡΠ° ΡΠ°ΡΡΡ Β«ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°Β» ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΡΠ³ΠΈΠ±Π°ΡΡΡΡ.
ΠΡΠ»ΠΈ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΡΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΎ Π½Π°Ρ Π°ΡΡΠΈΠ±ΡΡ sizes
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
sizes = "33.3vw"
ΠΠ°Ρ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π΅ ΡΠ°ΠΊ ΠΏΡΠΎΡΡ. ΠΠ°Ρ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡΠΊΡ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π² 36 ems. ΠΠΎΠ³Π΄Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΆΠ΅, ΡΠ΅ΠΌ 36 em, ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠΈΠΆΠ΅ ΡΡΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ 100% ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ°ΠΊ ΠΌΡ Π·Π°ΠΊΠΎΠ΄ΠΈΡΡΠ΅ΠΌ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² Π½Π°ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡΠ΅ sizes
?
ΠΡ Π΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ ΠΏΡΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² Ρ Π΄Π»ΠΈΠ½Π°ΠΌΠΈ:
sizes = "(min-width: 36em) 33.3Π²Π²,
100vw "
ΠΡΠΎ Π΅Π³ΠΎ ΡΠΎΡΠΌΠ°Ρ:
sizes = "[ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ] [Π΄Π»ΠΈΠ½Π°],
[ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ] [Π΄Π»ΠΈΠ½Π°],
ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅β¦
[Π΄Π»ΠΈΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ] "
ΠΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠ°ΡΠ½ΡΡ Π΄Π»ΠΈΠ½Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ Π·Π°ΠΏΡΠΎΡΠ°. ΠΡΠ»ΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄Π»ΠΈΠ½Ρ Β«ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡΒ», ΡΠΎ Π΅ΡΡΡ Π»ΡΠ±ΡΡ Π²ΡΡΡΠ΅ΡΠ½ΡΡ Π΄Π»ΠΈΠ½Ρ, Π½Π΅ ΠΈΠΌΠ΅ΡΡΡΡ ΠΏΠ°ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ°.
ΠΠ±Π»Π°Π΄Π°Ρ ΠΊΠ°ΠΊ Π΄Π»ΠΈΠ½ΠΎΠΉ sizes
, ΡΠ°ΠΊ ΠΈ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² Ρ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠ°ΠΌΠΈ w
Π² srcset
Π½Π° Π²ΡΠ±ΠΎΡ, Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π΅ΡΡΡ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π³ΠΈΠ±ΠΊΠΎΠΌ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅.
ΠΠ°ΠΊ Π½ΠΈ ΡΡΡΠ°Π½Π½ΠΎ, ΡΠ°Π·ΠΌΠ΅ΡΡ
ΠΈ w
Π² srcset
ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΠ΅ΠΌΡΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
s. ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡ Π΄Π»ΠΈΠ½Ρ CSS, ΠΌΡ Π΄Π°Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² CSS; ΠΈ, ΡΠΌΠ½ΠΎΠΆΠΈΠ² ΡΡΠΎ Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
, Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π½Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΅ΠΌΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ — Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ device-pixel-ratio ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ ΠΎΡ
Π²Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½Ρ 1x ΠΈ 2x, ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ srcset
ΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ
ΠΎΡ
Π²Π°ΡΡΠ²Π°Π΅Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΆΠΈΠ΄ΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΡΠ»ΡΡΠ°Π΅, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΊ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΡΠΊΡΠ°Π½Π°.
ΠΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΡΠ°Π·Ρ ΠΎΠ±Π΅ Π·Π°Π΄Π°ΡΠΈ. ΠΠ° ΡΠ·ΡΠΊΠ΅, ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, w
Π² srcset
ΠΈ sizes
ΠΎΡ
Π²Π°ΡΡΠ²Π°Π΅Ρ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
Π§ΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ Π΄Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄Π»Ρ ΠΌΠ°Π½Π΅Π²ΡΠ° . ΠΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°ΠΌ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΠΈΡ
Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΡΠΎΠ³ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΡΡΠ»ΠΎΠ²ΠΈΠΉ. Β«ΠΡΠ»ΠΈ ΡΠΊΡΠ°Π½ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, — Π³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΌΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, — ΡΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΒ».Β«ΠΡΠΎΡΡΠΎ ΠΎΠΏΠΈΡΠ°Π² ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ w
Π² srcset
ΠΈ ΠΎΠ±Π»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ
, ΠΌΡ Π΄Π°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΠΈ Π±ΠΎΠ³Π°ΡΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΎ ΡΡΠ΅Π΄Π΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°. ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ Π½ΠΈΠ·ΠΊΠ°Ρ ΠΈΠ»ΠΈ Π΄ΠΎΡΠΎΠ³Π°Ρ.
ΠΡΠ΅ ΠΊΠΎΠ΅-ΡΡΠΎ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.Π§ΡΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ» ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ, ΡΠ°ΠΊ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΄Π»ΠΈΠ½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 12 ΡΠΌ ΠΊ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΈΠ· ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠ°ΠΊ ΡΡΠΎ?
ΠΠ°ΠΊΠ΅Ρ ΡΠΎΡΠ΅ΡΠ°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΄Π»ΠΈΠ½Ρ. (Π‘ΠΌ. ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ)
ΠΡ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ ΡΡΠ½ΠΊΡΠΈΡ calc ()
Π² Π½Π°ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡΠ΅ sizes
.
sizes = "(min-width: 36em) calc (.333 * (100vw - 12em)),
100vw "
Πβ¦ Π³ΠΎΡΠΎΠ²ΠΎ!
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Art-Direction
Π’Π΅ΠΏΠ΅ΡΡ Π³ΠΎΡΠΎΠ²ΠΈΠΌ Π½Π° Π³Π°Π·Π΅! ΠΡ ΡΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΡΠ΅ΡΠΊΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π½Π° Π²ΡΠ΅Ρ Π±Π΅Π· ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ , ΠΎΠΊΠ½Π°Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΡΠΊΡΠ°Π½Π°Ρ .
ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Π·Π°Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠΉΡΠΈ Π΄Π°Π»ΡΡΠ΅? Π§ΡΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ Π·Π°Ρ ΠΎΡΠ΅Π»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ?
ΠΠΎΠ³Π΄Π° Apple ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ»Π° iPad Air Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ Π³ΠΎΠ΄Ρ, Π½Π° Π΅Π΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Π±ΡΠ»ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΎ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½ΠΈΡΠ΅ΠΌ Π½Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ — ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ°Π½Π°ΡΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° — ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΠ³Π΄Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ»Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΊΠΎΠΉ, iPad ΡΠ΄Π΅Π»Π°Π» Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π²Π΅ΡΡ: ΠΎΠ½ ΠΏΠΎΠ²Π΅ΡΠ½ΡΠ»ΡΡ, ΡΡΠΎΠ±Ρ Π»ΡΡΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°!
ΠΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ ΡΡΠΎ Β«Π°ΡΡ-Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ΅ΠΉΒ».
Apple ΡΠΎΠ·Π΄Π°Π»Π° ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π·Π»ΠΎΡΠΏΠΎΡΡΠ΅Π±Π»ΡΡ HTML ΠΈ CSS: ΡΠ°Π·ΠΌΠ΅ΡΠΈΠ»Π° ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ — ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π»ΠΎ — ΠΊΠ°ΠΊ ΠΏΡΡΡΠΎΠΉ div
ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΠ»Π° Π΅Π³ΠΎ background-image
Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.ΠΠΎΠ²Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π²ΡΠΎΡΠ°ΠΌ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π² HTML.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠ±Π»Π΅Π³ΡΠ°Π΅Ρ ΡΡΠΎ ΠΏΡΡΠ΅ΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠΈ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΏΠΎΠ²Π΅ΡΡ
srcset
:
ΠΈ source
.
ΠΠ΅ΡΠ½Π΅ΠΌΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ. ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , ΠΌΡ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΠΌ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Ρ ΠΌΠ°ΡΡΡΠ°Π± Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΠΎΠ±ΡΠ΅Π·ΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΏΠ»Π°Π²Π°ΡΡΡΡ Π²Π»Π΅Π²ΠΎ. , ΠΎΡΡΠ°Π²Π»ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΈΠΌΠ΅Ρ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½Π½ΡΠΌΠΈ Ρ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ.(Π‘ΠΌ. ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ)
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΏΠ°ΡΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ:
-
cropped-small.jpg
(96 Γ 96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) -
cropped-large.jpg
(192 Γ 192 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) -
small.jpg
(320 Γ 240 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) -
medium.jpg
(640 Γ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) -
large.jpg
(1024 Γ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΠ°ΠΊ ΠΌΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ ? ΠΠΎΡ ΡΠ°ΠΊ:
<ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°>
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ΅Π½, Π² Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄Π²Π° ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°
ΠΈ ΠΎΠ΄ΠΈΠ½ img
. ΠΡΡΠΎΡΠ½ΠΈΠΊ
s ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ Π΄Π²Π΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΈΡΠΊΡΡΡΡΠ²ΠΎ (ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΠΎΠ΅ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅).(ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ) img
ΡΠ»ΡΠΆΠΈΡ Π½Π°ΡΠΈΠΌ Π·Π°ΠΏΠ°ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ. ΠΠ°ΠΊ ΠΌΡ Π²ΡΠΊΠΎΡΠ΅ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠΌ, Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ ΠΎΠ½ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π·Π° ΠΊΡΠ»ΠΈΡΠ°ΠΌΠΈ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ
:
ΠΡΠΎΡ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠΎΠ»Π½ΡΡ Π²Π΅ΡΡΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ. ΠΡ Ρ
ΠΎΡΠΈΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΡΠ΅Ρ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅, ΡΠΎ Π΅ΡΡΡ ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΈΡΠ΅ 36 em.ΠΠ΅ΡΠ²ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ Π·Π΄Π΅ΡΡ, media = Β«(min-width: 36em)Β»
, Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ. ΠΡΠ»ΠΈ Π·Π°ΠΏΡΠΎΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ media
ΠΎΡΠ΅Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ true
, ΡΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ
; Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ.
ΠΡΡ
ΠΎΠ΄Π½ΡΠΉ
ΠΠ²Π° Π΄ΡΡΠ³ΠΈΡ
Π°ΡΡΠΈΠ±ΡΡΠ° — srcset
ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
— Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Ρ ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ΄Π½ΠΎ ΠΎΡΠ»ΠΈΡΠΈΠ΅: ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΡ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ
Π±ΡΠ΄Π΅Ρ Π²ΡΠ±ΡΠ°Π½ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΠ΅Ρ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° sizes
ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° Π΄Π»ΠΈΠ½Π°, 33.3vw
.
ΠΠΎΠ³Π΄Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΆΠ΅, ΡΠ΅ΠΌ 36 ems, ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°
Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½ΠΈΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ false
, ΠΈ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊΠΎ Π²ΡΠΎΡΠΎΠΌΡ:
ΠΡΠΎ Π½Π°Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠΉ ΡΡΠΎΠΆΠ°ΠΉ. ΠΡΠ° Π²Π΅ΡΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ, Π½ΠΎ ΠΌΡ Π²ΡΠ΅ ΠΆΠ΅ Ρ
ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»Π°ΡΡ ΡΠ΅ΡΠΊΠΎ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΈ 1x ΠΈ 2x ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΈΠ»ΠΈ ΠΈΡ
ΠΏΡΠΎΡΡΡΠΌΠΈ Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡΠ°ΠΌΠΈ x
.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ ΠΏΠΎΠ΄ΠΎΡΠ»ΠΈ ΠΊ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π°ΠΆΠ½ΠΎΠΌΡ (Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠ΅Π±ΡΠ΅ΡΡΡ! ) img
.
ΠΡΠ±ΠΎΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ audio
ΠΈΠ»ΠΈ video
, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠΌ
, ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΈ Ρ img
Π·Π΄Π΅ΡΡ. ΠΠ΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ! ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΈΠ΄ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ img
, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ
. ΠΠ΅Π· img
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅Ρ;
ΠΈ Π²ΡΠ΅ Π΅Π³ΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ
ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΊΠΎΡΠΌΠΈΡΡ Π΅Π³ΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠΌ.
ΠΠΎΡΠ΅ΠΌΡ? ΠΠ΄Π½Π° ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΠΏΡΠ΅ΡΠ΅Π½Π·ΠΈΠΉ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
Π·Π°ΠΊΠ»ΡΡΠ°Π»Π°ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½Π° Π·Π°Π½ΠΎΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ΅Π»Π° ΠΊΠΎΠ»Π΅ΡΠΎ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Ρ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡΠΉ ΠΌΠ΅Π΄ΠΈΠ°-ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ audio
ΠΈ video
, ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ img
. ΠΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡ ΠΏΠΎ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΡ ΠΈ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ — ΡΠ°Π±ΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π½Π΅ Ρ
ΠΎΡΠ΅Π»ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π² Π½ΠΎΠ²ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ img
.Π‘Π°ΠΌ
Π½Π΅Π²ΠΈΠ΄ΠΈΠΌ, ΡΠ΅ΠΌ-ΡΠΎ ΠΏΠΎΡ
ΠΎΠΆ Π½Π° Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΠΉ span
. ΠΠ³ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
s ΠΏΡΠΎΡΡΠΎ ΡΠ°ΠΌ, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠ³ ΡΠΈΡΠΎΠ²Π°ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΡΠ»Π΅ Π²ΡΠ±ΠΎΡΠ° ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ URL-Π°Π΄ΡΠ΅ΡΠ° ΡΡΠΎΡ URL-Π°Π΄ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ Π½Π° img
. ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π»ΡΠ±ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, max-width: 100%
), Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ img
, Π° Π½Π΅ ΠΊ
.
Π₯ΠΎΡΠΎΡΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π½Π°ΡΠ΅ΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΠ°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΈΠΏΠΎΠ²
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ΅ ΡΡΠΎ ΡΠΆΠ°ΡΠΈΠ΅, ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΡ ΠΊ Π±Π΅ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΌΡ ΠΏΡΠΎΡΡΠΎ Ρ
ΠΎΡΠΈΠΌ Π΄Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΡΠ°ΠΉΠ»Π° ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². . ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΡΠ»Π΅Π΄ΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌΡ Π°ΡΠ΄ΠΈΠΎ
ΠΈ Π²ΠΈΠ΄Π΅ΠΎ
: ΡΠΈΠΏ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°
.
<ΡΠΈΡΡΠ½ΠΎΠΊ>
ΠΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅Ρ ΡΠΈΠΏ Π½ΠΎΡΠΈΡΠ΅Π»Ρ image / svg
, ΠΎΠ½ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ
; Π΅ΡΠ»ΠΈ ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½ΡΡΡ image / png
, ΠΎΠ½ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ img
ΠΈ GIF.
ΠΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° ΠΎΡ GIF ΠΊ PNG Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ Π±ΡΠ»ΠΈ Π±Ρ ΡΠ±ΠΈΡΡ ΠΈΠ·-Π·Π° ΡΠ°ΠΊΠΎΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ
Π΄Π°Π΅Ρ Π½Π°ΠΌ ΡΡΠΎ, Π·Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Ρ ΠΎΡΠ½ΠΎΠ²Ρ Π΄Π»Ρ Π½ΠΎΠ²ΡΡ
ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Ρ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠ΅ Π³ΠΎΠ΄Ρ.
ΠΠΎΡ ΠΈ Π²ΡΠ΅!
ΠΠΎΡ ΠΈ Π²ΡΠ΅: ΠΊΠ°ΠΆΠ΄Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π² Π½ΠΎΠ²ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΈ ΠΎΠ±ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ
. Π ΡΠ΅Π»ΠΎΠΌ, srcset
, x
, w
, ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
,
, source
, media
ΠΈ type
Π΄Π°ΡΡ Π½Π°ΠΌ Π±ΠΎΠ³Π°ΡΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΠΌΠΎΡΡΡ — ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ( Π½Π°ΠΊΠΎΠ½Π΅Ρ! ) ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π² Π³ΠΈΠ±ΠΊΠΈΡ
ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ
ΠΈ ββΠ½Π° Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π΅ ΡΡΡΡΠΎΠΉΡΡΠ².
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π΅ΡΠ΅ Π½Π΅ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½Π°Ρ . ΠΠ΅ΡΠ²ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΡΡΠ°Π΄ΠΈΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΠΏΠΎΠ΄ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π°Π³Π°ΠΌΠΈ; Π΅Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ Π°Π²ΡΠΎΡΡ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅, ΡΡΠΎΠ±Ρ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄Π΅ΡΠ°Π»ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. ΠΡΠ΅ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΠ΄ ΡΠ³ΠΈΠ΄ΠΎΠΉ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° Responsive Images Community Group. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° Π½ΠΎΠ²ΠΎΡΡΡΠΌΠΈ, ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡΠ΅ΡΡ ΠΊ Π³ΡΡΠΏΠΏΠ΅, Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° IRC-ΠΊΠ°Π½Π°Π», Π²Π·Π²Π΅ΡΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ GitHub ΠΈΠ»ΠΈ ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ Π½ΠΎΠ²ΡΡ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ Π±ΡΠ»Π»Π΅ΡΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° RICG Π² Twitter.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π»ΠΈΡΠ΅ΡΠ°ΡΡΡΠ° ΠΏΠΎ SmashingMag:
(il, al)
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Π²Ρ ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
ΠΠ°Π³ΡΡΠ·ΠΈΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ΅Ρ Π½ΠΈΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈ ΡΡΠΎΠ²Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.
ΠΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° srcset
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° HTML, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ»ΠΎΡ
ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠ°ΠΏΡΠΎΡΠΈΠ², ΠΌΠ΅ΡΠΎΠ΄, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π² ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅, ΠΏΡΠΎΡΡ ΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
CSS width
ΠΈ height
, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΠ΅ΡΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
. ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΌΠ°ΠΊΠ΅Ρ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±ΡΠ» Π³ΠΈΠ±ΠΊΠΈΠΌ / Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ.
ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ΅Ρ
Π½ΠΈΠΊΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΠΌΠΎΠΉ Π² ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅, Π½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΎΠΉ ΠΆΠ΅: Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π·Π°Π΄Π°ΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ (ΠΈΠ»ΠΈ Π»ΡΠ±ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ.Π³ΡΠ°ΠΌΠΌ. ems
) Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° width
, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΡΠ²ΠΎΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Ρ height
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
.
img {
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ;
}
ΠΠ°Π·ΠΎΠ²ΠΎΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠ°ΡΠ½Π΅ΠΌ Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°.
Π£ Π½Π°Ρ Π΅ΡΡΡ div
, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.
HTML
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width
, ΡΠ°Π²Π½ΠΎΠ΅ 96%, ΡΠ°ΠΊ ΡΡΠΎ Ρ Π½Π΅Π³ΠΎ Π΅ΡΡΡ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΏΠΎΠ»Ρ. ΠΠ³ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠ°ΠΊ ΡΡΠΎ ΠΌΠ°ΠΊΠ΅Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠΈΡΠΎΠΊΠΈΠΌ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ
Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
width
, ΡΠ°Π²Π½ΠΎΠ΅ 100%, ΡΠ°ΠΊ ΡΡΠΎ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π²Π½Π° Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ. ΠΡΡΠΎΡΠ°
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ½Π° Π°Π²ΡΠΎ
, ΡΠ°ΠΊ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ.
Π£Π‘Π‘
div.container { ΡΠΈΡΠΈΠ½Π°: 96%; ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ; / * Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° * / } img { ΡΠΈΡΠΈΠ½Π°: 100%; Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ; }
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π΅ΠΌΡ Π±ΡΠ»ΠΈ Π·Π°Π΄Π°Π½Ρ Π°ΡΡΠΈΠ±ΡΡΡ HTML ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ (Ρ. Π.
width = "960"
). ΠΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ΅ΡΠ΅Π· HTML.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠ»Π±ΡΠ°Ρ
ΠΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ Π² ΡΡΠΎΠ»Π±ΡΠ°Ρ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π³Π°Π»Π΅ΡΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΡΠΊΠΈΠ·Ρ ΡΠ°ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠ»Π±ΡΠ°Ρ
, Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, — ΡΡΠΎ ΠΏΠΎΠ½ΠΈΠ·ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS width
ΠΈ Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
display
, ΡΠ°Π²Π½ΠΎΠ΅ inline-block
.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡ Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ: ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΡΠ΅ΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ.
ΠΠ°ΠΊΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
ΠΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS width
Π½Π° 48%, ΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠΈΡΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ½ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π½Π° 50%, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΏΠΎΠ»Ρ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ.
HTML
Π£Π‘Π‘
img {
ΡΠΈΡΠΈΠ½Π°: 48%;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
}
ΠΠ°ΠΊΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΡΠ΅ΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ
ΠΠ»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΡΠ΅ΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΠ° ΠΆΠ΅, Π½Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width
ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π½Π° ΠΎΠ΄Π½Ρ ΡΡΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°: 32%.
HTML
Π£Π‘Π‘
.Three-columns {
ΡΠΈΡΠΈΠ½Π°: 32%;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
}
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΡΠ»ΠΎΠ²Π½ΡΠΌΠΈ ΡΠΎΡΠΊΠ°ΠΌΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ»ΠΎΠ²Π½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π΄Π»Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΡΠΎΠ»Π±ΡΠ°Ρ , ΡΡΠΎΠ±Ρ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌΠΈ, ΡΡΠΎΠ»Π±ΡΡ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ»Π±ΡΠ΅ Π½Π° ΡΠΌΠ°ΡΡΡΠΎΠ½Π°Ρ , Π² Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠ°Ρ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠ² ΡΠ΅ΡΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠ°Ρ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ .
HTML
Π£Π‘Π‘
/ * ΠΠ»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,Π³ΡΠ°ΠΌΠΌ. ΡΠΌΠ°ΡΡΡΠΎΠ½Ρ) * /
img {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
}
/ * ΠΠ»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ²) * /
@media (min-width: 420 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
img {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 48%;
}
}
/ * ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²) * /
@media (min-width: 760 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
img {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 24%;
}
}
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½Π°Π΄ ΠΊΠΎΡΠΎΡΡΠΌ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅.ΠΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π½ΠΎ ΠΌΠΎΠ³Π»ΠΈ Π½Π΅ ΡΠ°ΠΊ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π΄ΡΡΠ³ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ .
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ
Π§ΡΠΎΠ±Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ»ΠΈ 100% ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° max-width
(ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π΅ΠΌΡ ΡΠΈΡΠΈΠ½Ρ
, ΡΠ°Π²Π½ΡΡ 100%.
.container {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
img {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΈΠΌΠ΅Π΅Ρ Ρ ΠΎΡΠΎΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, Π΅Π³ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄ΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ / ΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠ»ΠΎΠ²Π½ΠΎ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ΅Π½ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²) Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ srcset ΠΈ / ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΠΈΡΠΈΠ» ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π» ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠΌ. Picturefill Π‘ΠΊΠΎΡΡΠ° ΠΠΆΠ΅Π»Ρ.
Π‘Π²ΡΠ·Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Β· Bootstrap
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ (ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ) ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊ Π½ΠΈΠΌ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ — Π²ΡΠ΅ ΡΠ΅ΡΠ΅Π· ΠΊΠ»Π°ΡΡΡ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ±ΡΠ°Π·Ρ Π² Bootstrap ΡΠ΄Π΅Π»Π°Π½Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ .img-fluid
. max-width: 100%;
ΠΈ Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ;
ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ SVG ΠΈ IE 10
Π Internet Explorer 10 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ SVG Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ .img-fluid
ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ width: 100% \ 9;
ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ. ΠΡΠΎ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π΄ΡΡΠ³ΠΈΡ
ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ Bootstrap Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π΅Π³ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
ΠΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π½Π°ΡΠΈΠΌ ΡΡΠΈΠ»ΠΈΡΠ°ΠΌ border-radius Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ .img-thumbnail
, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π² 1 ΠΏΠΈΠΊΡΠ΅Π»Ρ.
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΡΠΎΠ²Π½ΡΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ² float ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°. ΠΠ»ΠΎΠΊ ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠΎΠ²Π½Ρ
ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»ΡΠΆΠ΅Π±Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° .mx-auto
margin.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ
, ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡΡ
.img- *
Π²
ΠΈ Π½Π΅ Π² ΡΠ΅Π³
.
<ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°>