ΠΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ | CSS: ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ°ΠΉΡΠ°
ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ 15+ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌ ΠΊΡΡΡΠ°ΠΌ ΠΏΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΡΠ΅Π½Π°ΠΆΠ΅ΡΠΎΠΌ
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ². ΠΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ β ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠ»ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
@media (ΡΡΠ»ΠΎΠ²ΠΈΡ) { /* CSS-ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ Π΄Π»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΡΠ»ΠΎΠ²ΠΈΡ */ }
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΌΠΎΠ³ΡΡ Π²ΡΡΡΡΠΏΠ°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½ΡΡΠ°Π½ΡΡ. ΠΠ°ΡΠ°ΡΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ:
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΊΡΠ°Π½Π°
ΠΠ»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΡΠ°Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»ΡΡ orientation
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡΡΡΠΏΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄Π²ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
landscape
. Π£ΡΠ»ΠΎΠ²ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΠΊΡΠ°Π½Π°. ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ β ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΈΡΠΈΠ½Π° viewport Π±ΠΎΠ»ΡΡΠ΅ Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ.
. Π£ΡΠ»ΠΎΠ²ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΠΊΡΠ°Π½Π°. ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ β ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²ΡΡΠΎΡΠ° viewport Π±ΠΎΠ»ΡΡΠ΅ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ.
<style> @media (orientation: landscape) { /* ΠΡΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄Π΅Ρ Π±Π΅Π»ΡΠΉ */ body { background: #FFF; } } @media (orientation: portrait) { /* ΠΡΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄Π΅Ρ ΡΡΡΠ½ΡΠΉ */ body { background: #000; } } </style>
Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π°
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΡ ΠΎΠ΄ΠΈΡΡ ΠΈΠ· ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ viewport. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π·Π½Π°ΠΊΠΎΠΌΡΠ΅ Π½Π°ΠΌ ΠΏΠΎ ΠΎΠ±ΡΡΠ½ΡΠΌ CSS-ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ ΡΡΠ»ΠΎΠ²ΠΈΡ width, min-width, max-width
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΊΠΈΡ
ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΡΠΎΠ·Π΄Π°ΡΡΡΡ breakpoint β ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ. ΠΡΠΎ Π³ΡΠ°Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ. Π’Π°ΠΊΠΈΠ΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ², ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ², ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ², ΠΊΠΎΡΠ΅Π²Π°ΡΠΎΠΊ.
<style> /* ΠΠ΄Π΅ΡΡ Π±ΡΠ΄ΡΡ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ viewport Π±ΠΎΠ»ΡΡΠ΅ 1400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. */ @media (max-width: 1400px) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΠΈΠ½Π° viewport ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 1400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ 990 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈ ΡΡΠΈΠ»ΠΈ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ */ } @media (max-width: 990px) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΠΈΠ½Π° viewport ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 990 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ 770 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈ ΡΡΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² */ } @media (max-width: 770px) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΠΈΠ½Π° viewport ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 770 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² */ } </style>
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ². ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ CSS ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠΈΠ»Π΅ΠΉ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½Π°ΡΠ°Π»Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ½ ΡΡΠΈΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠ΅, Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΠΎΡΠ΅ΡΡΠ΄Π½ΠΎ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π² ΡΡΠ»ΠΎΠ²ΠΈΠΈ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΡΠΈΡΠΈΠ½Π΅ viewport 770 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅:
- Π‘ΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
- Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠ°
max-width: 1400px
. - Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠ°
max-width: 990px
. - Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠ°
max-width: 770px
.
ΠΠΎΠ΄Ρ
ΠΎΠ΄, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Desktop First. ΠΡ Π²Π½Π°ΡΠ°Π»Π΅ ΠΏΠΈΡΠ΅ΠΌ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ², Π° Π² ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ, Π΄ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π²ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
Π ΠΏΡΠΎΡΠΈΠ²ΠΎΠ²Π΅Ρ Desktop First ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ Mobile First. ΠΠ³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Π½Π°ΡΠ°Π»Π΅ ΠΏΠΈΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π° Π·Π°ΡΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ, ΠΏΠΈΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² viewport. ΠΡΠ»ΠΈ Π² Desktop First ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠ΅ΠΉ ΡΠ²Π»ΡΠ»ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ max-width, ΡΠΎ Π² Mobile First ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ min-width.
Π‘ΡΠΈΠ»ΠΈ, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° Mobile First Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<style> /* ΠΠ΄Π΅ΡΡ Π±ΡΠ΄ΡΡ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ viewport ΠΌΠ΅Π½ΡΡΠ΅ 770 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. */ @media (min-width: 770px) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΠΈΠ½Π° viewport Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 770 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ */ } @media (min-width: 990px) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΠΈΠ½Π° viewport Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 990 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ 1400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. */ } @media (min-width: 1400px) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠΈΡΠΈΠ½Π° viewport Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 1400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ */ } </style>
ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΡ
Π£ΡΠ»ΠΎΠ²ΠΈΡ Π²Π½ΡΡΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠΈ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ°:
- ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Β«ΠΒ». ΠΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ CSS-ΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Β«ΠΒ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ
and
.Π‘Π΄Π΅Π»Π°Π΅ΠΌ ΡΡΠ»ΠΎΠ²ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ, ΡΡΠΎ ΡΠΊΡΠ°Π½ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ (Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ) ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ viewport Π½Π΅ ΠΌΠ΅Π½ΡΡΠ΅ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
<style> @media (orientation: portrait) and (min-width: 600px) { .container { /* ΠΠ»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ viewport Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 100 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² */ width: 100%; } } </style>
- ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Β«ΠΠΠΒ». Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΡ Π±Ρ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ. Π£ΡΠ»ΠΎΠ²ΠΈΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΡΡΡΡ Π·Π°ΠΏΡΡΡΠΌΠΈ. ΠΠΎΠ·ΡΠΌΡΠΌ ΠΏΡΠΎΡΠ»ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π΅Π³ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Β«ΠΠΠΒ»:
<style> @media (orientation: portrait), (min-width: 600px) { .container { /* ΠΠ»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΠΠΠ ΡΠΈΡΠΈΠ½ΠΎΠΉ viewport Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 100 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² */ width: 100%; } } </style>
- ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Β«ΠΠΒ».
not
. Π Π΅Π°Π»ΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ° Π½Π΅ Π²Π΅Π»ΠΈΠΊΠΎ, Π² Π²ΠΈΠ΄Ρ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈ Π½Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎΡΡΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ. Π ΡΠ²ΡΠ·ΠΈ Ρ ΡΡΠΈΠΌ ΡΠΎΠ²Π΅ΡΡΡ Π²ΠΎΠ·Π΄Π΅ΡΠΆΠ°ΡΡΡΡ Π² ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°not
.
<style> @media not all and (orientation: landscape) { .container { /* ΠΠ»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ (ΡΡΠ»ΠΎΠ²ΠΈΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ Β«ΠΠ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°ΡΒ») ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ container ΡΠΈΡΠΈΠ½ΠΎΠΉ Π² 100 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² */ width: 100%; } } </style>
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΏΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ CSS
ΠΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ CSS-ΡΠ°ΠΉΠ»Π°, Π½ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ
Π² HTML ΠΏΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ ΡΠ°ΠΉΠ»Π° ΡΡΠΈΠ»Π΅ΠΉ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ media
.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ CSS ΡΠ°ΠΉΠ»ΠΎΠ²</title> <!-- ΠΠ±ΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° --> <link rel="stylesheet" href="style.css"> <!-- Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² Ρ viewport Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 750px --> <link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css"> </head> <body> <!-- Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° -->
ΠΡΠΊΡΡΡΡ Π΄ΠΎΡΡΡΠΏ
ΠΡΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΠΈ ΠΎΠΏΡΡΠ½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ°ΡΠ½ΠΈΡΠ΅ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ
- 130 ΠΊΡΡΡΠΎΠ², 2000+ ΡΠ°ΡΠΎΠ² ΡΠ΅ΠΎΡΠΈΠΈ
- 1000 ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ Π·Π°Π΄Π°Π½ΠΈΠΉ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
- 360 000 ΡΡΡΠ΄Π΅Π½ΡΠΎΠ²
ΠΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ° *
ΠΡΠΏΡΠ°Π²Π»ΡΡ ΡΠΎΡΠΌΡ, Π²Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ Β«Π‘ΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ Β» ΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡ Β«ΠΡΠ΅ΡΡΡΒ», Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ³Π»Π°ΡΠ°Π΅ΡΠ΅ΡΡ Ρ Β«Π£ΡΠ»ΠΎΠ²ΠΈΡΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡΒ»
ΠΠ°ΡΠΈ Π²ΡΠΏΡΡΠΊΠ½ΠΈΠΊΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡΡ :
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ — CSS Framework — Π ΡΡΡΠΊΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Invision Community
CSS ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ IPS4 ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ, ΡΠΎ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΡΠΈΡΡΠ°ΡΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΡΡΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Ρ ΠΎΡΠ΅ΡΡ ΡΠΊΡΡΡΡ Π΅Π³ΠΎ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ .
ΠΠ»Π°ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΡΡ Π² IPS4, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² IPS4
Π ΡΠ°ΠΌΠΊΠ°Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΡΡΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ, ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ²:
- Π’Π΅Π»Π΅ΡΠΎΠ½Ρ — Π΄ΠΎ 767 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ.
- ΠΠ»Π°Π½ΡΠ΅ΡΡ — ΠΌΠ΅ΠΆΠ΄Ρ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ 979 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Β ΡΠΈΡΠΈΠ½Ρ.
- ΠΠ°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡΒ — 980 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠΈΡΠ΅.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΠΏΠΎΠΊΠ°Π·Π°ΡΡ/ΡΠΊΡΡΡΡ
CSS ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π΄Π²Π΅ Π³ΡΡΠΏΠΏΡ ΠΏΠΎ ΡΡΠΈ ΠΊΠ»Π°ΡΡΠ° Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΡΡΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ , ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΠ»Π°ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ; ΡΠΎ Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π»ΡΠ±ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΡΡΠΎΠΌΡ ΠΊΠ»Π°ΡΡΡ, Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΊΠ»Π°ΡΡ ΡΠΊΡΡΡΠΈΡ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ, Π½ΠΎ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΡΠ½.
ΠΡΠΈ ΠΊΠ»Π°ΡΡΡ:
- ipsResponsive_hidePhone
- ipsResponsive_hideTablet
- ipsResponsive_hideDesktop
- ipsResponsive_showPhone
- ipsResponsive_showTablet
- ipsResponsive_showDesktop
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ , Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<div> ΠΠ°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ *Π½Π΅ Π±ΡΠ΄Π΅Ρ* ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ , Π½ΠΎ *Π±ΡΠ΄Π΅Ρ* Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ </div>
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ
Π²ΡΡΠ΅, Π²Ρ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ, ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΡΡΠΈΠΉ ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Β ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΠΊΠ»Π°ΡΡΠΎΠ²:
- ipsResponsive_block
- ipsResponsive_inlineBlock
- ipsResponsive_inline
<div> ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ *ΡΠΎΠ»ΡΠΊΠΎ* Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΡΠΊΡΠ°Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°, ΠΈ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. </div>
ΠΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠΊΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Β
Β Β Report ΠΠΎΠΊΡΠΌΠ΅Π½Ρ
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ | HTML & CSS Is Hard
β 10. HTML & CSS Is Hard
Π£ΡΠ΅Π±Π½ΠΈΠΊ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
Β«ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Β» ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΈΠ΄Π΅Π΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ
ΠΎΡΠΎΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²ΡΠ΅Ρ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
β ΠΎΡ ΡΠΈΡΠΎΠΊΠΎΡΠΊΡΠ°Π½Π½ΡΡ
ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ² Π΄ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ². ΠΡΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΠΊ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠΈΡΠ°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π΅ΡΡΠΈΠ΅ΠΉ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΡΠ΄ΠΎΠ±Π½ΠΎΠΉ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ², ΠΈ Π΅Π³ΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΎΠΌ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ². Π‘ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²Β» CSS. ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ ΠΊΠ°ΠΊ ΠΎ ΡΠΏΠΎΡΠΎΠ±Π΅ ΡΡΠ»ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ» CSS. ΠΠ½ΠΈ ΡΠΎΠΎΠ±ΡΠ°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ HTML-ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ Π²Π΅Π±-ΡΠ°ΠΉΡ Π΄Π»Ρ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ² ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ Ρ Π½ΠΈΠΌ ΡΠ°ΠΉΡ Π΄Π»Ρ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ², ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½Ρ ΠΈ ΡΡ ΠΆΠ΅ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ (ΠΈ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅Ρ) Π΄Π»Ρ Π½ΠΈΡ ΠΎΠ±ΠΎΠΈΡ . ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½ΠΎΠ²ΡΡ ΡΡΠ°ΡΡΡ ΠΈΠ»ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΠΎΠΏΠ΅ΡΠ°ΡΠΊΡ Π² Π½Π°ΡΠ΅ΠΌ HTML, ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ , ΡΠ°ΠΊ ΠΈ Π² ΡΠΈΡΠΎΠΊΠΎΡΠΊΡΠ°Π½Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ . ΠΡΠΎΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈΡΠΈΠ½ΠΎΠΉ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ ΠΎΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ.
Π ΡΡΠΎΠΉ Π³Π»Π°Π²Π΅ ΠΌΡ ΡΠ·Π½Π°Π΅ΠΌ, ΡΡΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ Π»ΠΈΡΡ ΡΠΎΠ½ΠΊΡΡ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΡ Π²ΠΎΠΊΡΡΠ³ ΡΡΠ°ΡΠΎΠ³ΠΎ Π΄ΠΎΠ±ΡΠΎΠ³ΠΎ CSS, Ρ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Π΄ΠΎ ΡΠΈΡ
ΠΏΠΎΡ. ΠΠ°ΠΊ ΠΌΡ ΡΠΊΠΎΡΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠΌ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. (Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΡΠΎ ΡΠΎΠ²ΡΠ΅ΠΌ Π΄ΡΡΠ³Π°Ρ ΠΈΡΡΠΎΡΠΈΡ).
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ°
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ responsive-design
ΠΈ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ.html
. ΠΡΠΎ ΡΠ°ΠΌΠ°Ρ ΠΏΡΡΡΠ°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²ΠΈΠ΄Π΅Π»ΠΈ, Π½ΠΎ ΠΎΠ½Π° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π½Π°ΠΌ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎΠ΅ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅:
<Π³ΠΎΠ»ΠΎΠ²Π°> <ΠΌΠ΅ΡΠ°ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠ°='UTF-8'/>ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ <ΡΠ΅Π»ΠΎ>
ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΡΡΠΎΠΉ Π³Π»Π°Π²Π΅. Π Π°ΡΠΏΠ°ΠΊΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π² ΡΡ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡ ΡΡΠΎ ΠΈ responsive.html
, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΡΡ ΠΏΠ°ΠΏΠΊΡ images
. ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅, Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
CSS Media Queries
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΡΠΎ Ρ
ΠΎΡΠΎΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π½Π°ΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΡ ΠΊ ΡΠ»ΠΎΠΆΠ½ΡΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ°ΠΌ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡ ΡΠ·ΠΊΠΈΠ΅, ΡΡΠ΅Π΄Π½ΠΈΠ΅ ΠΈ ΡΠΈΡΠΎΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ, ΡΠΎΠ·Π΄Π°Π² Π½ΠΎΠ²ΡΠΉ styles.css
ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ:
* { ΠΌΠ°ΡΠΆΠ°: 0; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0; box-sizing: Π³ΡΠ°Π½ΠΈΡΠ°-ΠΊΠΎΡΠΎΠ±ΠΊΠ°; } /* ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ */ Π’ΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½ @media ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) { ΡΠ΅Π»ΠΎ { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #F09A9D; /* ΠΡΠ°ΡΠ½ΡΠΉ */ } } /* Π’Π°Π±Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ */ @media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½ ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 401px) ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 960px) { ΡΠ΅Π»ΠΎ { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #F5CF8E; /* ΠΠ΅Π»ΡΡΠΉ */ } } /* Π‘ΡΠΈΠ»ΠΈ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° */ Π’ΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½ @media ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 961px) { ΡΠ΅Π»ΠΎ { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #B2D6FF; /* Π‘ΠΈΠ½ΠΈΠΉ */ } }
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΈ ΡΠ°Π·Π½ΡΡ
ΡΠΎΠ½ΠΎΠ²ΡΡ
ΡΠ²Π΅ΡΠΎΠ²: ΡΠΈΠ½ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π±ΠΎΠ»ΡΡΠ΅ 960px
, ΠΆΠ΅Π»ΡΡΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ 401px
ΠΈ 960px
ΠΈ ΠΊΡΠ°ΡΠ½ΡΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ΅Π½Π΅Π΅ 400px
.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π²ΡΠ΅Π³Π΄Π° Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ @media
Β«at-ruleΒ», Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ ΡΡΠ»ΠΎΠ²Π½ΠΎΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΠ³ΡΡΠ½ΡΡ
ΡΠΊΠΎΠ±ΠΎΠΊ. ΠΠ½ΡΡΡΠΈ ΡΠΈΠ³ΡΡΠ½ΡΡ
ΡΠΊΠΎΠ±ΠΎΠΊ Π²Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΠΊΡΡΡ ΠΎΠ±ΡΡΠ½ΡΡ
ΠΏΡΠ°Π²ΠΈΠ» CSS. ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΠ±ΡΠ°ΡΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΡΠ»ΠΎΠ²ΠΈΠ΅.
Π’ΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
Β«Π’ΠΈΠΏ Π½ΠΎΡΠΈΡΠ΅Π»ΡΒ» ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ΡΡ ΡΡΠΈΠ»ΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ Ρ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ (Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΠ΅ΡΠ°ΡΠ½ΡΡ
Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Cmd+P Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅). Π§Π°ΡΡΠΈ min-width
ΠΈ max-width
Π½Π°Π·ΡΠ²Π°ΡΡΡΡ Β«ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°Β» ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΠ΅ΡΠ΅ΡΡ.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΠ²Π»ΡΡΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌΠΈ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ, Π½ΠΎ Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΠΈΠ»ΠΈ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° ΠΈ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΌΡΡΠΈ.
ΠΡΠ°ΠΊ, @media
β ΡΡΠΎ ΡΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, Π½ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΌΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΡΠ°Π΅ΠΌΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ? ΠΡΠΈΠΌΠ΅Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΡΡΠΎΠΉ Π³Π»Π°Π²Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
Π ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΌΠΈΡΠ΅ Π²Π°Ρ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π²Π°ΠΌ ΡΠ°ΠΊΠΈΠ΅ ΠΌΠΎΠΊΠ°ΠΏΡ. ΠΠ°ΡΠ° ΡΠ°Π±ΠΎΡΠ° ΠΊΠ°ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡΠ΅ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ
.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠΊΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² (ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Β«ΡΠ΄Π²ΠΈΠ³ ΠΌΠ°ΠΊΠ΅ΡΠ°Β»). ΠΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΡΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ΄; ΠΎΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡΡ Π΄Π²Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ:
- Β«ΠΠΈΠ±ΠΊΠΈΠΉΒ» ΠΌΠ°ΠΊΠ΅Ρ β ΡΡΠΎ ΠΌΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π³ΠΈΠ±ΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³Π»Π°Π² Π½Π°Π·Π°Π΄.
- ΠΠ°ΠΊΠ΅Ρ Β«ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΡΒ» ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½: ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° (ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ Π² Π³Π»Π°Π²Π΅ Β«Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ CSSΒ»).
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΡΠ²Π»ΡΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠΈΠ²ΡΠΌΠΈ, Π° Π²Π΅ΡΡΠΈΡ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ.
ΠΡΠ±ΠΎΡ ΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²Π°
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠΈΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠ°ΠΊΠ΅ΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ². ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΅ΡΡΡ ΠΏΡΠΈΡΠΈΠ½Π°.
ΠΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ². ΠΡΠΈΡΡΡΠΏΠ°Ρ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΎΠ½ΠΈ Π½Π΅ ΠΏΡΡΠ°ΡΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-ΡΠΎ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π½Π° iPhone 6s, Galaxy S7 ΠΈΠ»ΠΈ iPad mini, β ΠΎΠ½ΠΈ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ 300 ΠΈ 500 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ (ΠΈΠ»ΠΈ Π»ΡΠ±ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ).
ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΠΎΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² min-width
ΠΈ max-width
Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ΅ (Π²ΠΌΠ΅ΡΡΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΊΠ°ΠΊ Β«ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°Β» Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°) Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ°Ρ ΡΠ°ΠΉΡ Π½Π΅ Π·Π°Π±ΠΎΡΠΈΡΡΡ ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠ΅, ΡΡΠΎ Π΅ΠΌΡ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΏΡΠΈ ΡΠΈΡΠΈΠ½Π΅ 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ).
Mobile-First Development
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ ΠΊ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΊΡΠΈΠ½ΡΠΎΡΠΎΠ² Π²ΡΡΠ΅. ΠΡΠ΅Π³Π΄Π° ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΊ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ. ΠΠ°ΠΊΠ΅ΡΡ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ², ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½Ρ, ΡΠ΅ΠΌ ΠΈΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈ, ΠΈ ΡΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Β«ΡΠ½Π°ΡΠ°Π»Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅Β» ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΌ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ .
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ responsive.html
ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΡΡΡΡΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ. Π ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΡΠΎΠ±ΠΊΠ΅ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°Π·Π»ΠΈΡΠΈΡΡ ΠΈΡ
Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Π³ΡΠ΅.
<Π΄Π΅Π»> <Π΄Π΅Π»> <Π΄Π΅Π»>![]()