- Π²Π΅ΡΡΡΠΊΠ° ΠΏΠΎΠ΄ Π»ΡΠ±ΠΎΠΉ ΡΠΊΡΠ°Π½ β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠΎΠ²: ΠΎΠ±Π·ΠΎΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΎΠ² ΠΈ CSS ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ²
- ΠΡΠ΅Π΄ΠΈΡΠ»ΠΎΠ²ΠΈΠ΅
- Π ΡΡΠ°ΡΡΠ΅
- ΠΠΈΠ΄Ρ Π²Π΅ΡΡΡΠΎΠΊ
- ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅Ρ
Π½ΠΈΠΊΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎΠ΄ Π»ΡΠ±ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ²
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°
- ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²
- Π‘ΡΡΠ»ΠΊΠΈ ΠΏΠΎ ΡΠ΅Ρ Π½ΠΈΠΊΠ°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
- CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ css ΠΈΠ»ΠΈ javascript?
- ΠΠ°ΠΊ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½
- ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ° ΠΈ ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅
- ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
- 5 ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Photoshop
- HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ - Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ HTML ΠΈ CSS
- ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΎΠ±Π·ΠΎΡ
- ΠΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ
- Mobile First
- ΠΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
- Π Π΅ΡΡΡΡΡ
- Π£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ - ΠΠ·ΡΡΠΈΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π° 5 ΠΌΠΈΠ½ΡΡ
- ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π½Π° ΠΌΠΎΠΉ ΡΠ°ΠΉΡ
- 11 ΡΠ±Π΅Π΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- Β«ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ 56,74% Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.β
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ?
- ΠΡΠΈΠΌΠ΅ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΠ°ΠΊΠΎΠΉ Π²Π°Ρ Π»ΡΠ±ΠΈΠΌΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ?
- ΠΡΡΡΡΡΠΉ ΠΏΡΡΡ ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS | by Rachel Lum
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½: 50 ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΡΡ
ΠΏΡΠ°ΠΊΡΠΈΠΊ
- ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- Designmodo
- Π‘Π°ΠΉΠΌΠΎΠ½ ΠΠΎΠ»Π»ΠΈΡΠΎΠ½
- Andersson-Wise Architects
- Π‘ΡΠΈΠ²Π΅Π½ ΠΠ΅ΠΉΠ²Π΅Ρ
- ΠΠΎΡΠΎΠ±ΠΊΠ° Π·Π°ΠΆΠΈΠ³Π°Π½ΠΈΡ
- Food Sense
- The Boston Globe
- Think ΠΠΈΡΠ°ΠΌΠΈΠ½
- Sasquatch! ΠΡΠ·ΡΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΡΡΠΈΠ²Π°Π»Ρ
- ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- Staffanstorp
- ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΠ°ΠΎΠΌΠΈ ΠΡΠΊΠΈΠ½ΡΠΎΠ½
- ΠΡΡΠΏΠΏΠ° ΠΏΡΠ΅Π΄ΠΊΠΎΠ²
- ΠΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠ°ΡΡΡΠ±ΠΊΠ°
- ΠΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΡ Β«ΠΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Β» 2012
- Illy Issimo
- ΠΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΡ Arrrrcamp
- Π ΠΎΠ±ΠΎΡ ΠΈΠ»ΠΈ Π½Π΅Ρ?
- Π§Π°Ρ ΠΠ΅ΠΌΠ»ΠΈ
- TeixidΓ³
- Π ΠΈΠ±ΠΎ
- ΠΠ΅ΡΠ΅Π½ ΠΠ΅ΡΠΊΠΈΠ½
- ΠΠ»ΡΠ± ΡΠ»Π°Π΄ΠΊΠΈΡ ΡΠ»ΡΠΏ
- Π³Π»ΡΠΊ
- dConstruct
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
- ΠΡΡΠ΅Π½ΡΠΈΡΠ½ΡΠ΅ Π²Π°ΠΊΠ°Π½ΡΠΈΠΈ
- ΠΡΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠ°Π³ΠΎΠ²
- Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΠΉ
- Π Π°ΠΉΠ°Π½ ΠβΠ ΡΡΠΊ
- FlexSlider
- ΠΠ»Ρ Π‘Π΅Π½Π΄Π΅ΡΠΎ Π΄Π΅Π»Ρ ΠΠ°ΠΊΠ°ΠΎ
- Π§ΠΈΡΠ°ΡΡ Π»Π΅ΠΊΡΠΈΠΈ
- Π¨ΠΊΠΎΠ»Π° Π‘Π²ΡΡΠΎΠ³ΠΎ ΠΠ°Π²Π»Π°
- ΠΠΈΠ·Π°ΠΉΠ½ ΠΠ°ΠΎΠΌΠΈ ΠΡΠΊΠΈΠ½ΡΠΎΠ½
- Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΠ΅Π½ Π₯Π°Π½Π΄Π·ΠΎ
- ΠΡΠΈΠΌΠ΅Ρ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS3
- Nordic Ruby Conference
- Halifax Game Jam
- Diablo Media
- ASU ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ
- 3200 Π’ΠΈΠ³ΡΠ΅Ρ
- Kings Hill Cars
- 8 Π»ΠΈΡ
- Asbury Agile
- ΠΠ»ΡΠ·Π°ΠΊΡΠ΅Π°ΡΠΈΠΈ
- Sleepstreet
- ΠΡΠ°Π²ΠΈΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Ρ ΡΠΈΡΠ°Π΅ΡΠ΅? ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½Π°ΡΠΈ Π³Π»Π°Π²Π½ΡΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ.
- ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ | Π¦Π΅Π½ΡΡ ΠΏΠΎΠΈΡΠΊΠ° Google | Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Google
Π²Π΅ΡΡΡΠΊΠ° ΠΏΠΎΠ΄ Π»ΡΠ±ΠΎΠΉ ΡΠΊΡΠ°Π½ β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π²ΡΠ΅ ΡΠ΅ΠΆΠ΅ ΠΈ ΡΠ΅ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π½ΠΎΠ²ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±Ρ Π½Π΅ ΠΈΠΌΠ΅Π» Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π»ΠΈΠ±ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠΉ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π΄Π΅Π²Π°ΠΉΡΠΎΠ². ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ Π»ΡΠ±ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΊΡΠ°Π½Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ°ΠΉΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½Π½ΠΎ Π½Π° ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠΌΠ°ΡΡΡΠΎΠ½Π΅. Π§ΡΠΎΠ±Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠ°ΠΉΡ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ·ΠΊΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ°Π½Π½ΠΎ Π½Π° ΡΠΈΡΠΎΠΊΠΎΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ΅.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ (Π°Π½Π³Π». responsive web design, RWD)Β β ΡΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ΅ΡΠ΅Π· CSS, ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°Π·Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ².
CSS-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
Π Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ grid-ΡΠΈΡΡΠ΅ΠΌΡ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS (Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ ΠΌΡ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π² ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΠΎΠΊΠ°Ρ ΡΡΠ΅Π±Π½ΠΈΠΊΠ°).
ΠΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ° ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΌΠΈΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π΄ΠΈΡΠΏΠ»Π΅Ρ. ΠΠΎΡΠΎΠΌΡ ΠΏΡΠΎΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π±Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π²ΠΏΠΈΡΠ°Π»ΡΡ Π² ΡΠΊΡΠ°Π½ Π»ΡΠ±ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΆΠ½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ ΠΈ ΡΡΠΆΠ°ΡΡΡΡ (Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ), ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡ ΠΏΠΎΠ΄ ΡΠΊΡΠ°Π½ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡΒ β ΡΡΠΎ CSS-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅Ρ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ CSS-ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ 768β―ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²ΡΠΎΡΠΎΠΉ β Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ Π±ΠΎΠ»Π΅Π΅ 991 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Ρ.Β Π΄.
Π’Π°ΠΊΠΆΠ΅ ΡΠ΅ΡΠ΅Π· ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΈΠΏ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠΊΡΠ°Π½ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°, ΠΏΡΠΈΠ½ΡΠ΅Ρ, ΡΠ΅ΡΠ΅Π²ΠΎΠΉ ΡΠΈΠ½ΡΠ΅Π·Π°ΡΠΎΡ), ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΡΠΊΡΠ°Π½Π°, ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ (Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈΠ»ΠΈ ΠΊΠ½ΠΈΠΆΠ½Π°Ρ), ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΡ ΡΡΠΎ Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΡΡΠΈΡΡΠ²Π°Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π½ΡΠ°Π½ΡΠΎΠ².
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΠΎΠ³Π΄Π° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΉΡ Π±Π΅Π· Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ Π΅Π³ΠΎ Π² ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ, ΠΊΠ°ΠΊ Π½Π° ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΡΠ»Π΅Π²Π°:
ΠΡΡΠΎΡΠ½ΠΈΠΊ: developers.google.comΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π΅Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΠ°ΠΉΡΡ. Π§ΡΠΎΠ±Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΡΠ°ΠΉΡΠΎΠΌ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π± Π²ΡΡΡΠ½ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
ΠΡΠ»ΠΈ ΠΆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π΅Π½, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠΎΠ±ΡΠΈΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ. ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ Π»Π΅Π³ΠΊΠΎΒ β ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π²Π½ΡΡΡΡ ΡΠ΅Π³Π°ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
ΠΠ°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³ Π³ΠΎΠ²ΠΎΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°. Initial-scale ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ ΡΡΠΎΠ²Π΅Π½Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΡΠ»ΠΎΠ²Ρ, ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³Π° Π²Π°ΠΆΠ½ΠΎ ΠΈ Π΄Π»Ρ Google: ΠΏΡΠΈ Π΅Π³ΠΎ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΡΠΈΡΡΠ΅ΠΌΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ ΡΡ, ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π° ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠ°Π»Π΅Π΅ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅: ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠΎΠ²: ΠΎΠ±Π·ΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΠΈ CSS ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ²
October 24, 2017 Jazz Team Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠ°ΡΡΠΈ,
ΠΡΠ΅Π΄ΠΈΡΠ»ΠΎΠ²ΠΈΠ΅
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄ΠΎΠ»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ°ΡΠΈΠΊΠ° ΡΠ°ΡΡΠ΅Ρ ΡΡΡΠ΅ΠΌΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅ΠΌΠΏΠ°ΠΌΠΈ. Π‘ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π΄Π½Π΅ΠΌ Π»ΡΠ΄Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ Π΄Π΅Π²Π°ΠΉΡΡ Ρ Π²ΡΡ ΠΎΠ΄ΠΎΠΌ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ, ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅. Π’Π΅Π»Π΅ΡΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ, Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π»ΡΠ΄ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΈ Ρ. Π΄. ΠΠ±ΡΡΠ½ΡΠΉ ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠ΄Π½Π°ΠΊΠΎ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ β Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ΅ΠΊΡΡΠ° Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΡΡΠ°ΡΡΠ΅
ΠΠ°Π½Π½Π°Ρ ΡΡΠ°ΡΡΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΈΠΌΠ΅ΡΡΠΈΡ ΠΎΠΏΡΡ Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠΎΠ², Π·Π½Π°ΡΡΠΈΡ HTML ΠΈ CSS, ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡΠΈΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ Ρ. Π΄.
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ Π²ΠΈΠ΄Ρ Π²Π΅ΡΡΡΠΎΠΊ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ°ΠΉΡΡ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ, ΡΠ΅Ρ
Π½ΠΈΠΊΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ
ΡΡΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ. Π Π°Π·Π±Π΅ΡΠ΅ΠΌ ΠΏΠΎΠ½ΡΡΠΈΠ΅
ΠΠΈΠ΄Ρ Π²Π΅ΡΡΡΠΎΠΊ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²ΠΈΠ΄Ρ Π²Π΅ΡΡΡΠΎΠΊ, ΠΈΡ ΡΠ°Π·Π½ΠΈΡΡ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΏΡΠΈ ΠΈΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° (Fixed Layout) β ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π·Π°Π΄Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ. Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠ° ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°Ρ
Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ°Π½Π½ΡΠΉ ΡΠΈΠΏ Π²Π΅ΡΡΡΠΊΠΈ Π½Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
.
Π Π΅Π·ΠΈΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ°
Π Π΅Π·ΠΈΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ° (Elastic layout) ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΡΠ°ΠΉΡΠ° ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΠΎΡ ΠΈ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ
ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΡΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, max-width / min-width (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ / ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°), max-height / min-height (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ / ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°).
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Ρ
Π½ΠΈΠΊ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ:
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° (Adaptive Layout) ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈ Π»ΡΠ±ΠΎΠΌΡ Π΄ΡΡΠ³ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ΄ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π°, Π΄Π΅Π»Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΡΠ²Π΅Ρ ΠΈ Ρ. Π΄. ΠΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΡΡΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² (@media), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ
Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°, ΡΠΈΠΏ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°
ΠΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ°
ΠΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ° (Responsive Layout) β ΡΡΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ. ΠΡΠΈ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ°ΠΊ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΡΠ°ΠΊ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄Π°Π½Π½ΡΠΉ Π²ΠΈΠ΄ Π²Π΅ΡΡΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎΡΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΠ°ΠΉΡ ΠΏΡΠΈΡΠΏΠΎΡΠΎΠ±ΠΈΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ.
ΠΠΈΠΆΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° div ΡΠ°Π²Π½Π°Ρ 50% ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΡΡΠΎΠΉΡΡΠ², ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΡΡ
ΠΌΠ΅Π½ΡΡΠ΅ 1200px ΠΈ 100% Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΡΡΠΎΠΉΡΡΠ², ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΡΡ
ΠΌΠ΅Π½ΡΡΠ΅ 480px.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎΠ΄ Π»ΡΠ±ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ²
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Π΄Π»Ρ width, height, margin, padding ΠΈ Ρ. Π΄. Π‘Π°ΠΌΡΠΉ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°Π΄Π°Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° β ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
(%).
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ°Π²Π½ΠΎΠΉ 90% ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.
ΠΡΠΈ ΡΡΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.
Π’Π°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°:
vw β 1% ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°. ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°, ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°, Π²ΡΡΠΎΡΠ°, ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°;- vh β 1% Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π°. ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π°, ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°, Π²ΡΡΠΎΡΠ°, ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°;
- vmin β Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ΅Π΅ ΠΈΠ· vw ΠΈ vh;
- vmax β Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΠ΅Π΅ ΠΈΠ· vw ΠΈ vh.
ΠΠΈΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ vw ΠΈ vh. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ΅Π³Π° div Π±ΡΠ΄ΡΡ ΡΠ°Π²Π½Ρ 50% ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠΊΡΠ°Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΡΡΠΎΠ²:
- rem β Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΈΡΡΠ° <html>.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΡΠΈΡΠ»ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ ΡΠ΅Π³Π° body. Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ body Π·Π°Π΄Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° html. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ body Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π΅Π½ 30px (20px * 1.5 = 30px).
Π’Π°ΠΊΠΆΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ %, vw, vh ΠΈ Ρ. Π΄. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ body ΡΠ°Π²Π΅Π½ 80% ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° html β 16px.
ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
ΠΠ»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° max-width / min-width ΠΈ max-height / min-height ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠΎΠΏΡΡΡΠΈΠΌ, ΡΡΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ Π΄Π°Π½Π½ΠΎΠ³ΠΎ div ΡΠ²Π»ΡΠ΅ΡΡΡ body. Π’ΠΎΠ³Π΄Π°, ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΡΠΈΡΠΈΠ½Π° Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 60% ΠΎΡ ΡΠΈΡΠΈΠ½Ρ body. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π² max-width, ΡΡΠΎ 500px. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ ΡΡΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ β ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π½Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π·Π°Π΄Π°ΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°, ΡΠΈΠΏΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ Ρ. Π΄. ΠΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ @media, Π° Π΄Π°Π»Π΅Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠ»ΠΎΠ²ΠΈΠ΅.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠΈΠΏΠΎΠ² ΡΡΡΡΠΎΠΉΡΡΠ²:
- all β Π²ΡΠ΅ ΡΠΈΠΏΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- braille β ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΡΠ°ΠΉΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΏΡΠΌΠΈ Π»ΡΠ΄ΡΠΌΠΈ
- embossed β ΠΏΡΠΈΠ½ΡΠ΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ ΡΠΈΡΡΠ΅ΠΌΡ ΠΡΠ°ΠΉΠ»Ρ
- handheld β ΡΠΌΠ°ΡΡΡΠΎΠ½Ρ ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠ΅ ΠΈΠΌ Π°ΠΏΠΏΠ°ΡΠ°ΡΡ
- print β ΠΏΡΠΈΠ½ΡΠ΅ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ΅ΡΠ°ΡΠ°ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
- projection β ΠΏΡΠΎΠ΅ΠΊΡΠΎΡΡ
- screen β ΡΠΊΡΠ°Π½ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°
- speech β ΡΠ΅ΡΠ΅Π²ΡΠ΅ ΡΠΈΠ½ΡΠ΅Π·Π°ΡΠΎΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π²ΡΠ»ΡΡ
- tty β ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ²
- tv β ΡΠ΅Π»Π΅Π²ΠΈΠ·ΠΎΡΡ.
ΠΡΠΈΠΌΠ΅Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ΅Π³Π° div, Π½Π° ΡΠΊΡΠ°Π½Π°Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ², ΡΠΌΠ°ΡΡΡΠΎΠ½Π°Ρ ΠΈ Ρ. ΠΏ.
Π‘ΡΡΠ»ΠΊΠΈ ΠΏΠΎ ΡΠ΅Ρ Π½ΠΈΠΊΠ°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΠΈΠ·ΡΡΠΈΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌ:
Β
CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ
CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ β ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π΄Π»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠ°, Π±ΡΡΡΡΠΎΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠ»Π° ΠΎΡΠΈΠ±ΠΎΠΊ Π²ΡΡΡΡΠΊΠΈ (ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π²Π΅ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ Ρ. Π΄.). ΠΠ°Π½Π½ΡΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΎΠ² Π΄Π»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ², Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π½ΠΈΡ Π²ΡΠ΅Ρ
ΡΡΠΈΠ»Π΅ΠΉ Π²ΡΡΡΠ½ΡΡ. ΠΡΠΎ ΠΎΠ±ΡΡΠ»ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌΠΈ:
- ΠΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠ°Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½ΠΎΠ²
- ΠΠ΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π² ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ½ΠΈΠ·ΠΈΡΡ ΡΠΈΡΠ»ΠΎ ΡΠ°Π·Π½ΠΎΠ³Π»Π°ΡΠΈΠΉ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.
ΠΠ°ΠΊ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΡΠΊΡΠΈΠΏΡΠΎΠ²ΡΡ ΡΠ·ΡΠΊΠΎΠ² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, CSS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡΠΈΠ΅ Π²ΠΈΠ΄ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CSS-ΡΠ°ΠΉΠ»Π°, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°ΠΌΡΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ.
Bootstrap
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ:
http://getbootstrap.com/
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ web-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². Bootstrap β ΡΡΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, CSS ΠΈ JS. Bootstrap β ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π² ΡΠΎΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΠΏΠΎΠ²ΡΡΠ°ΡΡΠΈΠΉ ΡΠΊΠΎΡΠΎΡΡΡ ΠΈ ΠΎΠ±Π»Π΅Π³ΡΠ°ΡΡΠΈΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ web-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Bootstrap Π»Π΅Π³ΠΊΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ Π±Π°Π·ΠΎΠΉ ΠΊΠΎΠ΄Π° β ΠΎΡ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² Π΄ΠΎ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ². ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°:
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ CSS Π΄Π°Π½Π½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π΄Π²ΡΡ ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ CSS-ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠΎΠ²:Β Less ΠΈ Sass.
ΠΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ:
- 12 β ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°
- ΠΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Less ΠΈ Sass
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Normalize.css.
Material Design for Bootstrap
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ:
https://fezvrasta.github.io/bootstrap-material-design/
Material Design for Bootstrap β ΡΡΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° Bootstrap ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Ρ Material Design.
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Sass, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ, Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π³ΠΎΡΠΎΠ²ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΠΌΠΎΡΠ½ΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
Π½Π° jQuery.
ΠΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ:
- 12 β ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°
- ΠΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ Material Design.
Materialize
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ:
http://materializecss. com/
Materialize β ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π½Π° ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ Π²ΠΊΠ»ΡΡΠ΅Π½ Π½Π°Π±ΠΎΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π½ΠΈΡ . ΠΡΠΎΡΠ°Π±ΠΎΡΠ°Π½Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΡΡΠ΅ΠΊΡΡ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°Ρ , ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΠ»Π°Π²Π½ΡΠΌΠΈ. ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½Ρ ΠΈ ΠΏΠΎΠ½ΡΡΠ½Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π° Π΅Π΄ΠΈΠ½ΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠΏΡΠΎΡΠ°Π΅Ρ UX Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌ.
ΠΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ:
- 12 β ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°
- ΠΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ Material Design
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Sass.
Bulma
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ:
http://bulma.io/
Bulma β ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° Π½ΠΎΠ²ΠΎΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Flexbox. Flexbox β ΡΠ°ΠΌΡΠΉ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ Π² CSS.
ΠΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ:
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Flexbox Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ
- ΠΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Sass
- ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ JS-ΡΠ°ΠΉΠ»Ρ
Pure
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ:
https://purecss. io/
Pure β Π½Π°Π±ΠΎΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ CSS-ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π»ΡΠ±ΠΎΠΌ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ΅. Pure ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° Normalize.css ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. Pure β Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΌΠΎΡΡΡΡΡΡ Π½Π° Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΡΠΊΡΠ°Π½Π°. Pure ΠΈΠΌΠ΅Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΊΠ°ΡΡΠΎΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ:
- 24 β ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°
- ΠΠΎΠ΄ΡΠ»ΡΠ½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ
- ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ JS-ΡΠ°ΠΉΠ»Ρ
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Normalize.css
- ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΡΡΡΡΠΉ ΡΠΎΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°ΠΉΡΠΎΠ² Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΎΠ±ΡΡΠ»Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π² Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½ΠΎΠ². Π Π°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΠΉΡΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½ΠΎΠ². ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ CSS-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² ΡΠΏΡΠΎΡΡΠΈΡ Π²ΡΠ±ΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
CSS, Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°, Π²Π΅ΡΡΡΠΊΠ°, Π²ΠΈΠ΄Ρ Π²Π΅ΡΡΡΠΊΠΈ, ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ°, ΡΠ΅Π·ΠΈΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ°, ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΡΠ°ΡΡΡ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ css ΠΈΠ»ΠΈ javascript?
Π― ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Π― ΠΏΡΠΎΡΠΈΡΠ°Π» Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π·Π°ΠΏΡΠΎΡΠ΅ css media. Π§ΡΠΎ Ρ Ρ ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΠ°ΠΊΠ΅Ρ ΠΌΠΎΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, PC, ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ²).
ΠΡΠ»ΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π·Π°ΠΏΡΠΎΡ media Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° (Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ), Ρ Π²ΡΠ΅Π³Π΄Π° Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡΡ ΠΎ ΡΠΎΠΌ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ Π½ΠΎΠ²ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΡΠ°Π½ Ρ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ Π²ΡΡΠΎΠΊΠΈΠΌ ppi. ΠΡΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠ³ΡΠΎΠ·Ρ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π½ΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ PC?
ΠΡΡΠ³ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°Π³Π΅Π½Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ Π£ΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ userAgent. ΠΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅Ρ javascript Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ»ΠΎΠΌΠ°Π½Π°.
ΠΡΠ±ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΅ΡΠΈΡΡ ΠΌΠΎΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π²ΡΡΠ΅? ΠΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π»ΡΡΡΠ΅?
ΠΠ»ΠΈ Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ½ΡΠ» ΠΌΠ΅ΡΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π°ΠΏΡΠΎΡΠ° media?
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ.
javascript html css responsive-designΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ benleung Β Β 23 Π°Π²Π³ΡΡΡΠ° 2013 Π² 04:18
5 ΠΎΡΠ²Π΅ΡΠΎΠ²
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΎΡΠΈΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²Ρ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ RWD (Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½) ΠΈ AWD (Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½) ΠΏΡΠΎΡΡΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ?
- Jquery Mobile ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½?
Π― ΠΏΡΠΎΠ²Π΅Π» ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠΎΡΡΠΎΠΌΡ Ρ Π½Π°ΡΠΊΠ½ΡΠ»ΡΡ Π½Π° ΡΡΡ ΡΡΠ°ΡΡΡ ΠΎΡΡΡΠ΄Π°: Π―Π²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΡΡΠΎ ΠΈΠ·Π±ΡΡΠΎΡΠ½ΡΠΌ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ jQuery ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² /CSS media Π·Π°ΠΏΡΠΎΡΠΎΠ²? Π ΡΡΠΎ Π·Π°ΡΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΠ΅Π½Ρ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ. Π Π°Π·Π²Π΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° Jquery…
13
CSS-ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΏΡΡΡ, ΠΈ Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² , ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π·Π°ΠΏΡΠΎΡΡ media Ρ ΠΏΠΎΠΌΠΎΡΡΡ JS-ΠΏΠ»Π°Π³ΠΈΠ½Π°, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ css3mediaqueries.js, Π½ΠΎ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° JS ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, — ΡΡΠΎ ΡΠΈΡΠΊ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ Javascript, Π° ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½, ΠΎΠ½ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ΅ΠΉΡΠ°Ρ ΡΡΠΈΡΠ°Π΅ΡΡΡ Π»ΡΡΡΠ΅ΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ em Π΄Π»Ρ media Π·Π°ΠΏΡΠΎΡΠΎΠ² Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°Ρ ΡΠ°ΠΉΡ Π²ΡΠ΅Π³Π΄Π° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ .
ΠΡΡΠ³ΠΎΠΉ ΡΠΎΠ²Π΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°ΠΏΡΠΎΡΠ° media Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π»ΡΡΡΠΈΠΌΠΈ ΡΠΎΡΠΊΠ°ΠΌΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π° Π½Π΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π±ΡΠ΄Π΅Ρ ΡΠ΄Π΅Π»Π°Π½ΠΎ.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ π
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Sara Sou Β Β 23 Π°Π²Π³ΡΡΡΠ° 2013 Π² 06:06
1
id ‘ Π»ΠΈΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ min-width ΠΈ max-width. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ CSS. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ Π½Π° ΡΡΠ½ΠΊΠ΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, ΠΎΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠΊΡΠ°Π½Π°.
@media screen and (max-width:480px) { }
@media screen and (min-width:481px) { ) etc... etccc....
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ vzeke Β Β 23 Π°Π²Π³ΡΡΡΠ° 2013 Π² 04:22
0
Π― ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ media Π·Π°ΠΏΡΠΎΡΠ° Π² CSS. ΠΡΠΎΡΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΡΠ»Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ CSS…
@media screen and (max-width: 600px) { Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π·Π΄Π΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ΄ de Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ }
. logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}
@media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}
ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠ΄ Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π° Π² head/HTML.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Ico Portela Β Β 24 Π°Π²Π³ΡΡΡΠ° 2013 Π² 00:05
- HTML5 Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ . ΠΠΎΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ ΠΏΠΎΠΏΡΠΎΡΠΈΠ» ΠΌΠ΅Π½Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠΎΠ±Ρ Π±ΡΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΌ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ². Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΌΠ½Π΅Π½ΠΈΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° : ΠΡΠ΅ Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ HTML5, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ…
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ PrimeFaces
Π― ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Java (JSF framework) ΠΈ PrimeFaces . Π― Ρ ΠΎΡΠ΅Π» Π±Ρ Π·Π½Π°ΡΡ, ΠΌΠΎΠ³Ρ Π»ΠΈ Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅Π·ΠΎΠΏΠ½ΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ PrimeFaces?
0
Π― ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ Twtitter Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS3 media Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Tepken Vannkorn Β Β 23 Π°Π²Π³ΡΡΡΠ° 2013 Π² 04:23
0
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ jRWD, ΠΌΠΎΠ΄ΡΠ»Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ JavaScript, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π½Π΅Π΄Π°Π²Π½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π». ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ 12 ΡΡΡΠΎΠΊ ΡΠΈΡΡΠΎΠ³ΠΎ JavaScript ΠΈ 2 Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΠ½ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π½Π° GitHub, Π½Π° https://github.com/BlackMagic/jRWD .
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ jRWD Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ http://ieee-qld.org . ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄. ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ JavaScript, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ CSS ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ. Π Π½Π΅Ρ jQuery.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ BlackMagic Β Β 27 Π΄Π΅ΠΊΠ°Π±ΡΡ 2015 Π² 01:33
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ pure css centering help
Π£ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΡΠΏΠΎΠ½ΡΠΎΡΠΎΠ² Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΈΡΠΏΡΡΡΠ²Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΏΠΎΠ½ΡΠΎΡΠΎΠ². …
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°
ΠΠ°ΠΊΠΎΠ²Π° Π½Π°ΠΈΠ»ΡΡΡΠ°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ / ΠΏΠ»Π°Π½ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈΠ· ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°? Π― ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π» Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, Π½ΠΎ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡ Ρ Π½ΡΠ»Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ…
Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ iframe
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° ΡΠ°ΠΉΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· iframe, ΠΏΠΎΡ ΠΎΠΆΠ΅, Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. Π― Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ css ΡΠ΅Π±Π΅Π½ΠΊΠ° ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΠ» ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΡΠΎ ΡΠΎ, ΡΡΠΎ Ρ ΠΏΡΠΎΠ±ΠΎΠ²Π°Π»: <script…
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΎΡΠΈΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΠ΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π²Ρ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ RWD (Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½) ΠΈ AWD (Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½) ΠΏΡΠΎΡΡΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ?
Jquery Mobile ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½?
Π― ΠΏΡΠΎΠ²Π΅Π» ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠΎΡΡΠΎΠΌΡ Ρ Π½Π°ΡΠΊΠ½ΡΠ»ΡΡ Π½Π° ΡΡΡ ΡΡΠ°ΡΡΡ ΠΎΡΡΡΠ΄Π°: Π―Π²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΡΡΠΎ ΠΈΠ·Π±ΡΡΠΎΡΠ½ΡΠΌ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ jQuery ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² /CSS media…
HTML5 Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ . ΠΠΎΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ ΠΏΠΎΠΏΡΠΎΡΠΈΠ» ΠΌΠ΅Π½Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠΎΠ±Ρ Π±ΡΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΌ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ². Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ…
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ PrimeFaces
Π― ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Java (JSF framework) ΠΈ PrimeFaces . Π― Ρ ΠΎΡΠ΅Π» Π±Ρ Π·Π½Π°ΡΡ, ΠΌΠΎΠ³Ρ Π»ΠΈ Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅Π·ΠΎΠΏΠ½ΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ PrimeFaces?
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ Π² CSS Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ HTML
Π‘ΡΠ΅Π½Π°ΡΠΈΠΉ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ CMS, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅Ρ ΠΎΠΊΠΎΠ»ΠΎ 5-6 ΡΠ°ΠΉΡΠΎΠ², ΠΈ Π½Π° Π²ΡΠ΅Ρ ΡΠ°ΠΉΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². Π£ΡΠΈΡΡΠ²Π°Ρ Π½Π°ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΈ…
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎ ΠΌΠ΅ΡΠ°ΡΠ΅Π³Ρ
Π― Ρ ΠΎΡΡ Π·Π½Π°ΡΡ, Π΅ΡΡΡ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠΏΠΎΡΠΎΠ± ΠΈΠΌΠ΅ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΡΠΎΠΌΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³Π° : <meta name=viewport content=width=device-width,initial-scale=1>
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery ΡΠ΅ΡΠΏΠΈΡ Π½Π΅ΡΠ΄Π°ΡΡ ΠΏΠΎΡΠ»Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ
Π― ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π» Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ» ΠΎΠΏΡΠΈΡ 2 languages, ΠΏΠΎΡΡΠΎΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΡΠ½ΡΠΌ ΠΏΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ·ΡΠΊΠ° (ΠΈΠ·-Π·Π° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ltr/rtl). ΠΠΎΡΡΠΎΠΌΡ…
ΠΠ°ΠΊ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ°.
Π£ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΈΠ· Π²Π°Ρ ΡΠΆΠ΅ Π΅ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠ°ΠΉΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΡΠ°ΡΠ΅Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ΅Π²Π½ΡΡ ΡΠΈΠ» ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π½ΠΎ Π±Π΅Π΄Π° Π² ΡΠΎΠΌ, ΡΡΠΎ Π·Π°ΡΠ°ΡΡΡΡ ΡΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Ρ Π½ΠΈΡ Π½Π΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅.
Π‘ΡΠ°ΡΠΈΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ ΡΠ΅ΠΉΡΠ°Ρ β Π²Π΅ΡΠ½ΡΠΉ ΠΏΡΡΡ Π½Π° Π·Π°Π΄Π²ΠΎΡΠΊΠΈ ΠΏΠΎΠΈΡΠΊΠ°, Π° ΠΌΠ΅Π½ΡΡΡ ΡΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΆΠ΅ ΠΏΡΠΎΠ΄Π΅Π»Π°Π½Π° ΡΠΉΠΌΠ° ΡΠ°Π±ΠΎΡΡ ΠΏΠΎ Π΅Ρ ΡΡΠΎΠ²Π΅ΡΡΠ΅Π½ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ, ΠΈ Π½Π°ΡΠΈΠ½Π°ΡΡ Π²ΡΡ Π·Π°Π½ΠΎΠ²ΠΎ β ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²ΠΊΠ° ΡΠ° Π΅ΡΡ.
Π‘ΠΈΡΡΠ°ΡΠΈΡ Π½Π΅ ΠΏΡΠΈΡΡΠ½Π°Ρ, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΠ· Π½Π΅Ρ Π΅ΡΡΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΡΠΈΠ΅ΠΌΠ»ΠΈΠΌΡΠΉ Π²ΡΡ ΠΎΠ΄ β ΠΏΠ΅ΡΠ΅Π΄Π΅Π»Π°ΡΡ Π²Π°Ρ Π»ΡΠ±ΠΈΠΌΡΠΉ ΡΡΠ°ΡΠΈΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ.
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠ°ΡΡΡΡ ΡΠ°Π·Π΄Π΅Π»Π° ΠΌΡ ΡΠΆΠ΅ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ, ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΈΡ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ°Π±Π»ΠΎΠ½Π΅.
Π Ρ ΠΎΡΡ Π²ΡΠ΅ ΡΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°, ΡΡΡΡΠΊΡΡΡΠ° Ρ Π½ΠΈΡ ΠΏΠΎΡΡΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π°Ρ, Π° Π±ΠΎΠ»ΡΡΠ΅ Π½ΠΈΡΠ΅Π³ΠΎ ΠΈ Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π½Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠΉ Π²Π΅Π±-ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡ.
ΠΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ½ ΠΊΠ»Π°Π²ΠΈΡΠ΅ΠΉ F12, Π½ΠΎ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ Ρ Π½ΠΈΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Ghrome ΠΈ Mozilla.
ΠΠ΅Π±-ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡ Π² Ghrome
ΠΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΡΠ»ΠΈ ΠΎΠ½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΈΡΡΠ½ΠΊΠ΅, ΡΠΎ ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π΅ΡΡΡ.
ΠΡΠ»ΠΈ ΠΆΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅, ΡΠΎ ΠΌΠ΅Π½ΡΠ΅ΠΌ.
ΠΡΠΆΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΡΡ Π² ΠΌΠ΅Π½Ρ «Π’ΡΠΈ ΡΠΎΡΠΊΠΈ».
ΠΡΠΈ ΡΡΠΎΠΌ ΠΏΠ°Π½Π΅Π»Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΆΠ°ΡΡ Π²Π½ΠΈΠ· ΠΈ Π²ΡΡΡΠ½ΡΡΡ Π²Π²Π΅ΡΡ ΠΌΡΡΡΡ.
ΠΡΠΈ Π·Π°ΠΏΡΡΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΠ²ΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½ΠΎ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΌΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΡΠΈ Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
Π ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Π Mozilla Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ Π² ΡΡΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ°.
ΠΠΊΡΠΈΠ²Π°ΡΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΎΠΏΡΠΈΡ «Π Π΅ΠΆΠΈΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°».
ΠΠΎΡΠ»Π΅ Π΅Ρ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΡΠ°Π²ΠΊΠ° Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΠΊΠ½ΠΎΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π»ΡΡΡΠ΅ Π΄Π΅Π»Π°ΡΡ Π² Mozilla, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π² Ghrome Π±ΡΠ»Π° Π·Π°ΠΌΠ΅ΡΠ΅Π½Π° Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ° ΠΊΠ΅ΡΠ°.
ΠΡΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² Π½ΠΎΠ²ΡΡ Π²Π΅ΡΡΠΈΡΡ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π° ΡΠΈΡΡΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄Π΅ β Π»ΠΈΡΠ½ΡΡ ΡΡΠ΅ΡΠ°.
Π IE Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π»ΡΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ. Π£ΠΆ Π±ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π΅ΡΠ΅Π΄Π»ΠΈΠ² ΠΈ Π½Π΅ΠΏΠΎΠ²ΠΎΡΠΎΡΠ»ΠΈΠ². ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π² Π½ΡΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠΈ Π²ΡΠ΅Ρ ΡΠ°Π±ΠΎΡ.
ΠΡΠ°ΠΊ, ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ Π²Π΅Π±-ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡ ΠΈ ΠΏΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ ΠΈΠ·ΡΡΠ°Π΅ΠΌ ΡΡΡΡΠΊΡΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
Π‘ΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ, ΠΊΠ°ΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ Π²Π»ΠΎΠΆΠ΅Π½Ρ Π² Π½Π΅Π³ΠΎ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Ρ Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅.
Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΠ±ΡΡΠ½ΠΎ ΠΏΠ°Π½Π΅Π»Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ.
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ DOCTYPE, html, head ΠΈ body.
DOCTYPE β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²Π΅ΡΡΠΈΡ html;
html β ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π±Π»ΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΠ»ΠΈ ΡΠΊΡΠ°Π½ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°, ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°, ΡΠΌΠ°ΡΡΡΠΎΠ½Π°;
head β Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΡ ΡΠ΅Π³ΠΎΠ², ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΉ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°;
body β ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π½Π°ΠΌ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠΎΠΈΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ Π·Π°ΠΉΠ΄ΡΠΌ Π² ΡΠ΅Π³ head (ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ β Π Π΅Π΄Π°ΠΊΡΠΎΡ β ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (header. php)) ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π½Π΅Π³ΠΎ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
<meta name="viewport" content="width=device-width, initial-scale=1" />
ΠΡΡ, ΠΏΡΠΎ Π±Π»ΠΎΠΊ head ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π±ΡΡΡ.
ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ Π² ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ° ΠΈ ΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ Π²Π»ΠΎΠΆΠ΅Π½ΠΎ Π² ΡΠ΅Π³ body.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠΎΡΠΊΠΈ. ΠΡΠΈ ΡΡΠΎΠΌ Π²Π΅ΡΡ Π±Π»ΠΎΠΊ body ΠΎΠΊΡΠ°ΡΠΈΡΡΡΡ Π² Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΡΠ²Π΅Ρ, ΠΈ ΠΎΡΠΊΡΠΎΡΡΡΡ Π²Ρ ΠΎΠ΄ΡΡΠΈΠ΅ Π² Π½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠΈ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Π² ΡΠ°ΠΉΠ»Π΅ style.css.
Π ΡΡΠΈΠ»ΡΡ body Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width. Π ΡΡΠ°ΡΠΈΡΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½Π°Ρ ΠΎΠ½ΠΎ Π·Π°Π΄Π°Π½ΠΎ Π² ΡΡΠ°ΡΠΈΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ .
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΡΡΠΊΡΡΡΠ° ΡΠ°ΠΉΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΡΠ², ΡΠΎΡΡΠΎΡΡΠΈΡ ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΠΎ ΡΡΠ°ΡΠΈΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½Π° Π½Π΅ Π² body, Π° Π² ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΡΡ .
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°Π±Π»ΠΎΠ½Π°, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½Π° ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΡΠ΅ΡΡΠ΅ΠΌ ΡΠ»ΠΎΠ΅ β Π±Π»ΠΎΠΊΠ΅ div (Π½Π° ΡΠΊΡΠΈΠΏΡΡ ΠΏΠΎΠΊΠ° Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ Π½Π΅ ΠΎΠ±ΡΠ°ΡΠ°Π΅ΠΌ).
ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ² Π³Π΄Π΅ Π·Π°Π΄Π°Π½Π° ΡΡΠ°ΡΠΈΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈΠ΄ΡΠΌ Π² ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ (ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ β Π Π΅Π΄Π°ΠΊΡΠΎΡ β Π’Π°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ (style. css)), ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠΈΡΠΊΠ° (Ctrl+F), Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ Π½ΡΠΆΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ.
Π£Π±ΠΈΡΠ°Π΅ΠΌ width:950px; ΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ max-width: 1340px;, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠ°Ρ ΡΠ°ΠΌ Ρ Π²Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π°.
Π’ΠΎ Π΅ΡΡΡ Π²Π²Π΅Π΄ΡΠΌ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅, Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ.
ΠΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ width: 100%; ΡΠΎΠ³Π΄Π° Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅Π³Π΄Π° Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
ΠΡΠΈ ΡΠ°ΠΊΠΈΡ ΡΠ°ΡΠΊΠ»Π°Π΄Π°Ρ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΈ Ρ ΠΌΠ΅ΡΠ°-ΡΠ΅Π³ΠΎΠΌ viewport, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π² ΡΠ΅Π³Π΅ head, ΡΠ΅ΠΊΡΡ ΡΠ°ΠΉΡΠ° Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΡΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΠΈ Π΅Π³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
Π ΡΡΠΌ ΠΎΡΠ»ΠΈΡΠΈΠ΅ max-width ΠΎΡ width: 100%?
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠΊΡΠ°Π½Π°ΠΌ, Π½ΠΎ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠΌ, Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡΠΈΠΌ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΅ΡΡΡ Ρ ΠΠ°Ρ.
Π’Π΅ΠΊΡΡ Π½Π° Π½ΠΈΡ ΡΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ viewport, Π° Π²ΠΎΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π±Π»ΠΎΠΊΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ°ΠΉΠ΄Π±Π°ΡΡ, ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π΅ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΠΈΠ΄Π°ΡΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ.
ΠΠΎΡΡΠΎΠΌΡ Π»ΡΡΡΠ΅ Π·Π°Π΄Π°ΡΡ ΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π½Π° Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠΊΡΠ°Π½Π΅ ΠΈ Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅ ΠΊΠ»Π°ΡΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ.
Π Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π² ΠΌΠ΅ΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΠΈ ΡΠΎΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ.
ΠΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°Π΄Π°ΡΡ margin: auto; ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΡΠ»ΠΎΡ (Π±Π»ΠΎΠΊΡ) ΠΏΠΎΡΠ»Π΅ html. Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎ wrapper. Π’ΠΎΠ³Π΄Π° ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅.
Π’Π°ΠΊ, ΡΠΈΡΠΈΠ½Ρ ΡΠ΄Π΅Π»Π°Π»ΠΈ. Π’Π΅ΠΏΠ΅ΡΡ, ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π°, ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ°ΠΉΡΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π½Π° ΡΡΠ°ΡΠΈΡΠ½ΡΡ ΡΠ°ΠΉΡΠ°, Π° Π±ΡΠ΄Π΅Ρ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ.
Π Π²ΠΎΡ ΡΡΡ Π½Π°ΡΠ½ΡΡΡΡ ΡΠ°ΠΌΠ°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ, Π½ΠΎ ΠΈ ΡΠ°ΠΌΠ°Ρ ΡΡΡΠ΄Π½Π°Ρ ΡΠ°ΡΡΡ ΡΠ°Π±ΠΎΡΡ.
ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π±Π»ΠΎΠΊΠΈ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠ΅ΠΊΡΡΠ°, Π² ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΠ΅ΠΌΡΡ ΠΏΠΎΠ»Π΅, Π½Π°ΡΠ½ΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΡΠ°Π½Π΅Π΅ ΡΡΠΈΠ»ΡΠΌ ΠΈ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ°ΠΌ.
ΠΠ°ΡΠ½ΡΡΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠ²Π°ΡΠ΄Π°ΠΊ, Π½Π°Π·ΡΠ²Π°ΡΡΠΈΠΉΡΡ ΠΎΠ±ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠΎΡ Π΅Π³ΠΎ ΠΌΡ ΠΈ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ. ΠΠ΅Π»ΠΎ ΡΡΠΎ Π½Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅, Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΊΡΠΎΠΏΠΎΡΠ»ΠΈΠ²ΠΎΠ΅, ΡΠ°ΠΊ ΡΡΠΎ Π½Π°Π±ΠΈΡΠ°ΠΉΡΠ΅ΡΡ ΡΠ΅ΡΠΏΠ΅Π½ΠΈΡ.
ΠΠ°ΡΠΈΠ½Π°Π΅ΠΌ ΠΏΠΎΠΌΠ°Π»Π΅Π½ΡΠΊΡ ΡΠΆΠΈΠΌΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅Π΄Ρ Π·Π° ΡΠ΅ΠΌ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.
ΠΠΎΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠ°Π»Π° ΡΡΡΠΈΡΡΡ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°. ΠΠ°ΡΡΠΈΠ½ΠΊΠ° Π² Π½Π΅ΠΉ ΡΡΠ°Π»Π° ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ, Π° ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π»ΠΎ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
Π‘ΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° Π½Π°ΡΠ°Π»ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ.
ΠΠ°ΡΠ΅ΠΌ ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²ΡΡ ΡΠ°Π±ΠΎΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΡΡΡ Π² Π½ΡΠΌ, ΠΎΠΏΡΡΠΊΠ°Π΅ΠΌΡΡ Π² ΡΠ°ΠΌΡΠΉ Π½ΠΈΠ·, ΠΈ Π²ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ°ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ
@media screen and (max-width: 940px) {}
Π³Π΄Π΅
@media β ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° Π½ΠΎΡΠΈΡΠ΅Π»Ρ Π±ΡΠ΄ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°;
screen β ΡΠΈΠΏ Π½ΠΎΡΠΈΡΠ΅Π»Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡ;
(max-width: 940px) β ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ;
Π ΡΠΈΠ³ΡΡΠ½ΡΡ ΡΠΊΠΎΠ±ΠΊΠ°Ρ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ β Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠ²ΠΎΠΈ ΡΠΈΠ³ΡΡΠ½ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ. Π Π½ΠΈΡ Π²Π½ΠΎΡΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, Ρ ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅ Π΅ΡΡΡ ΡΠΈΠ³ΡΡΠ½ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ. Π’Π°ΠΊ ΡΡΠΎ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π΄Π²Π΅ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ.
ΠΡΠ°ΠΊ, ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π·Π°ΠΏΠΈΡΠ°Π½ΠΎ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ Π² Π½Π΅Π³ΠΎ Π²Π½ΠΎΡΠΈΡΡ.
ΠΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ°.
ΠΡΠ΅Π½Ρ ΠΠ°ΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ» Π²ΠΎΠΎΠ±ΡΠ΅ ΡΠ±ΡΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈΠ· ΡΠ°ΠΏΠΊΠΈ. ΠΡΡΠ°Π²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅.
Π Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½ΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡ Π²Π°ΡΡΠ°ΡΡΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΌΠΎΡΠ½ΠΎΡΡΡΡ, ΠΊΠ°ΠΊΠ°Ρ Π΅ΡΡΡ Ρ Π΄Π΅ΡΠΊΡΠΎΠΏΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠΌ ΡΡΠΆΠ΅Π»ΠΎ Π±ΡΠ΄Π΅Ρ Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΡΡΠΎ Π»ΠΈΡΠ½Π΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΎΡΠΊΡΡΡΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ½Π°ΡΠΈΡ Π²ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌ ΠΏΠ°Π½Π΅Π»Ρ Π²Π΅Π±-ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ° Π²Π²Π΅ΡΡ ΠΈ ΠΎΡΠΊΡΡΠ²Π°Ρ Π²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ΄ΡΡΠ΄, Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ Π³Π΄Π΅ Ρ Π½Π°Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π² ΡΠ°ΠΏΠΊΠ΅.
ΠΠ°ΡΠ»Π°ΡΡ ΠΎΠ½Π° ΠΊΠ°ΠΊ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π² Π±Π»ΠΎΠΊΠ΅ header. Π’ΡΡ ΠΆΠ΅ ΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π΄Π»Ρ Π½Π΅Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠΈΠ΄ΠΈΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ #branding img ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ display: block.
ΠΠΎΠΏΠΈΡΡΠ΅ΠΌ #branding img, ΠΈΠ΄ΡΠΌ Π² ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ, ΠΎΡΠΊΡΡΡΡΠΉ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅, Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΠΏΠΎΠΈΡΠΊ (Ctrl+F), Π²Π²ΠΎΠ΄ΠΈΠΌ #branding img, ΠΈ Π²ΠΎΡ ΠΎΠ½.
ΠΠ΅Π½ΡΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ block Π½Π° none.
Π ΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ. ΠΠ³Π°, ΡΠ°ΠΏΠΊΠ° «ΠΎΠΏΡΡΡΠ΅Π»Π°», Π° Π±Π»ΠΎΠΊΠΈ Ρ ΡΠ΅ΠΊΠ»Π°ΠΌΠΎΠΉ ΡΠΏΠΎΠ»Π·Π»ΠΈ Π²Π²Π΅ΡΡ .
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π½Π΅ ΠΏΠΎΡΡΠΎΡΠΎΠ½Π½ΡΡ ΡΠ΅ΠΊΠ»Π°ΠΌΠ°, Π° ΠΌΠΎΡ, ΡΠΎ ΡΡΠΈ Π±Π»ΠΎΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
Π’ΠΎ Π΅ΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠΏΠΎΠ»Π·ΡΠΈ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Π±Π»ΠΎΠΊΠΈ, Π΅ΡΠ»ΠΈ ΠΈΠΌ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡ ΠΌΠ΅ΡΡΠΎ.
ΠΠ½Π°ΡΠΈΡ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ΅Π»ΠΈ β ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΠΎΠΉ Π³Π»Π°Π·Ρ, ΠΈΠ½ΡΡ Π½Π° Π½Π΅ΠΉ Ρ Π²Π°ΡΠ°Π΅Ρ, ΠΈ Π·Π°Π΄Π°ΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π±Π»ΠΎΠΊΠ°ΠΌ.
ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΏΠΊΠΎΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ Π² Π²Π΅Π±-ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ #header, #site-title ΠΈ #site-description.
Π‘ΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, Π·Π°Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ ΠΈΡ Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΠΏΠΈΡΡΠ΅ΠΌ, ΠΈ Π² ΡΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @media, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Π°.
ΠΠΎΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² ΡΡΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°Ρ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΏΠΊΠ° ΡΠΌΠΎΡΡΠ΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π½Π΅Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ.
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠΎΡΡ Π² Π·Π°Π΄Π°ΡΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡ ΠΈ Π½Π΅ Π²Ρ ΠΎΠ΄ΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ΅ΠΉΡΠ°Ρ Π½Π°Π΄ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ½ΡΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Π£Π·Π½Π°ΡΡ ΠΊΠ°ΠΊ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠΌΠΈ.
ΠΠΎΡ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΠΎΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
ΠΠΎ ΡΡΡΠΈ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ β ΡΡΠΎ Π½ΠΎΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΡΠΎΡ ΡΠ°ΠΌΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ ΡΡΡΠΈΡΡΡ.
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π» Π»ΠΎΠΌΠ°ΡΡΡΡ ΠΏΡΠΈ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π°, ΡΠ°ΠΊ Π½Π° ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΈΡΠ΅ΡΡΡ ΡΠ²ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈ Π²ΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΏΠΎ Π½ΠΎΠ²ΠΎΠΉ.
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅, ΡΡΠΎ ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ β ΡΡΠΎ ΡΠ»ΠΎΠΌΠ°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΠΆΠ°ΡΡ Π΅Π³ΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ ΡΠ΄Π°ΡΡΡΡ, ΡΠΎ Π΅ΠΌΡ Π»ΡΡΡΠ΅ Π·Π°Π΄Π°ΡΡ display: none; ΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ.
ΠΠ°ΡΠ΅ΠΌ ΡΠ»Π΅ΡΡΡ Π²Π½ΠΈΠ· ΡΠ°ΠΉΠ΄Π±Π°ΡΡ. ΠΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΌ ΠΈ ΠΎΡΡΠ°Π²ΠΈΡΡ, Π° Π²ΠΎΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²ΠΈΡΡ Π²Π²Π΅ΡΡ Ρ, ΡΠ½Π°Π±Π΄ΠΈΠ² ΠΈΡ ΡΠΊΠΎΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠΎΠΌΠ½ΠΈΡΠ΅ β ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π·Π°ΡΠ΅Π΄ΡΠ΅ΠΌΡ ΡΠΎ ΡΠΌΠ°ΡΡΡΠΎΠ½Π° Π³Π»ΡΠ±ΠΎΠΊΠΎ ΠΏΠ»Π΅Π²Π°ΡΡ Π½Π° ΠΊΡΠ°ΡΠΎΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠΌΡ Π½ΡΠΆΠ΅Π½ ΠΎΡΠ²Π΅Ρ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ Π²Π²ΡΠ» Π² ΠΏΠΎΠΈΡΠΊ. ΠΠΎΡΡΠΎΠΌΡ Π²Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΡΠ°ΠΌΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΠΈΠ· ΡΠ°ΠΉΠ΄Π±Π°ΡΠ°.
ΠΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ ΡΡΠΈ ΡΡΡΡΠΎΡΠΊΠΈ ΠΈΠ»ΠΈ ΡΡΠΈ ΡΠΎΡΠΊΠΈ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΆΠ΅ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΠΎΠ΄ Π½ΠΈΠΌΠΈ ΠΌΠ΅Π½Ρ.
ΠΡΠ»ΠΈ Π²Ρ Π΅ΡΡ ΠΏΠ»ΠΎΡ ΠΎ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΠ΅ΡΠ΅ΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ css, ΡΠΎ Π²ΠΎΡ Π²Π°ΠΌ ΡΠ΅ΡΡΡΡ htmlbook.
ΠΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π²ΡΡΠ°Π²ΡΡΠ΅ Π² ΠΏΠΎΠΈΡΠΊ, ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ°ΠΌ ΡΡΠΎΡ ΡΠ°ΠΉΡ.
ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ ΠΎΡΠ²Π΅Ρ, Π΄Π»Ρ ΡΠ΅Π³ΠΎ, Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΈ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ.
ΠΠ΅Π»Π°Ρ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΡΡΠΏΠ΅Ρ ΠΎΠ².
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΊΠ°ΡΠΊΠ°Ρ ΡΠ°ΠΉΡΠ° < < < Π ΡΠ°Π·Π΄Π΅Π» > > > ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ β Π»Π΅Π³ΠΊΠΎ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ° ΠΈ ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! ΠΠ΅Π΄Π°Π²Π½ΠΎ, Π·Π°Π³Π»ΡΠ½ΡΠ² Π² ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΈΡ
ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Ρ ΠΏΠΎΠ½ΡΠ»Π°, ΡΡΠΎ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΠΈΡΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ°, ΡΠΎ Π΅ΡΡΡ, Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Ρ
ΠΎΡΠΎΡΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ, ΠΊΠ°ΠΊ Π½Π° ΡΡΠ°ΡΠΈΠΎΠ½Π°ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ
ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠ°Ρ
, ΡΠ°ΠΊ ΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
. ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ ΡΠ°ΠΌΠΈ, ΠΠ΅ΡΡΠΈΠΊΠ° Π½Π°ΠΌΠ΅ΠΊΠ°Π΅Ρ.
ΠΠ°ΠΊ Π²Π°ΠΌ ΡΠ°ΠΊΠ°Ρ ΠΊΠ°ΡΡΠΈΠ½Π°? ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π² ΠΊΠ°ΠΊΠΈΡ
-ΡΠΎ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ°Ρ
ΠΏΡΠΎΡΠ΅Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ°ΡΠΈΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅, Π² Π΄ΡΡΠ³ΠΈΡ
Π±ΠΎΠ»ΡΡΠ΅, Π½ΠΎ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΡΠ°ΡΡ Π²Π°Ρ ΡΠΎ ΡΠΌΠ°ΡΡΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅Π»ΡΠ·Ρ.
Π Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊΠΈΠΌ Π²ΠΈΠ΄ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²? Π ΡΡΠ°ΡΡΡΡ, Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ β responsinator.com
ΠΠ΄Π΅ΡΡ Π²ΡΠ΅ Π΄ΠΎ Π±Π΅Π·ΠΎΠ±ΡΠ°Π·ΠΈΡ ΠΏΡΠΎΡΡΠΎ β Π²Π²ΠΎΠ΄ΠΈΡΡ Π°Π΄ΡΠ΅Ρ ΡΠ°ΠΉΡΠ° ΠΈ Π²ΠΈΠ΄ΠΈΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠ°Π²Π°ΠΉΡΠ΅ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ Π±Π»ΠΎΠ³, ΠΊΠΎΡΠΎΡΡΠΉ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, Π·Π½Π°ΠΊΠΎΠΌ Π²ΡΠ΅.
Π£ ΠΠ»Π΅ΠΊΡΠ°Π½Π΄ΡΠ° ΠΠΎΡΠΈΡΠΎΠ²Π° ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΡΡΠ°Π·Ρ Π²ΠΈΠ΄Π½ΠΎ β Π² Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π²Π΅ΡΡΡΠΊΡ Π²Π»ΠΎΠΆΠ΅Π½Ρ Π΄Π΅Π½ΡΠ³ΠΈ ΠΈ Π½Π΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ, Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° ΡΠΈΡΠ°ΡΡ Π±Π»ΠΎΠ³ ΠΎΡΠ΅Π½Ρ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΈ Ρ Π½Π΅ ΡΠ΄ΠΈΠ²Π»ΡΡΡ, Π΅ΡΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡΠΊΠ°Π·ΠΎΠ² ΡΡΠ΅Π΄ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅Ρ
, ΠΊΡΠΎ Π·Π°Ρ
ΠΎΠ΄ΠΈΡ Π½Π° ΡΠ°ΠΉΡ Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°.
Π§ΡΠΎ Π΄Π΅Π»Π°ΡΡ? ΠΡΡ ΠΎΠ΄Π° Π΄Π²Π°: ΠΎΡΡΠ°Π²ΠΈΡΡ Π²ΡΠ΅ ΠΊΠ°ΠΊ Π΅ΡΡΡ ΠΈ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ Π·Π° ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΎΠ±Ρ ΠΎΠ΄ΡΡ ΡΠ²ΠΎΠΉ Π² Π²ΡΠ΄Π°ΡΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌ Π»ΠΈΠ±ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΠΎ Π½Π°ΡΠ°Π»Ρ Ρ Π½Π΅ Π²ΠΈΠ΄Π΅Π»Π° ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΠΈ Β«ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉΒ» Π²Π΅ΡΡΡΠΊΠΎΠΉ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΠ°Π·Π½ΠΈΡΠ° Π΅ΡΡΡ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΡΡΠ½Π΅ΡΡΡ ΠΈΠ»ΠΈ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅, ΠΎΠ½ ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°, ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΌΠ΅Π½ΡΡ ΡΡΠΈΠ»Ρ Π±Π»ΠΎΠΊΠΎΠ².
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ: ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, Π° ΡΠ°ΠΉΠ΄Π±Π°Ρ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡ Π²Π½ΠΈΠ· ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΈΡΡΠ΅Π·Π°Π΅Ρ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»ΠΈ ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ΄ΠΆΠ΅ΡΠ° ΠΈ Π·Π½Π°Π½ΠΈΠΉ CSS/HTML, Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ.
ΠΠ°ΠΊΠ°Π·Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π²Π΅ΡΡΡΠΊΡ Ρ ΡΡΠΈΠ»Π°Π½ΡΠ΅ΡΠ°
Π‘Π°ΠΌΡΠΉ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, Π²Π°ΡΠΈΠ°Π½Ρ, ΠΈ ΠΎΠ½ ΠΆΠ΅ ΡΠ°ΠΌΡΠΉ Π½Π΅ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ. ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ Π½Π΅ ΠΈΠ· Π΄Π΅ΡΠ΅Π²ΡΡ . Π Π²ΡΠ΅ ΠΆΠ΅, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°, ΠΈ Π½Π΅Ρ ΠΆΠ΅Π»Π°Π½ΠΈΡ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² ΡΠΎΠ½ΠΊΠΎΡΡΡΡ Π²Π΅ΡΡΡΠΊΠΈ, Π»ΡΡΡΠ΅ Π½Π°ΠΉΡΠΈ ΡΡΡΠ΄ΠΈΡ ΠΈΠ»ΠΈ ΡΡΠΈΠ»Π°Π½ΡΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅Ρ Π²Π°Ρ ΡΠ°Π±Π»ΠΎΠ½ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ ΡΠ΄Π΅Π»Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ. Π ΠΊΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ, Π²Ρ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅ β responsinator.com Π² ΠΏΠΎΠΌΠΎΡΡ.
ΠΠ°ΠΉΡΠΈ Π³ΠΎΡΠΎΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΡΡΠ°ΡΠ°ΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡ:
- www.templatemonster.com β ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΉ ΠΏΠ»Π°ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ CMS ΠΈ ΠΏΡΠΎΡΡΠΎ HTML-ΡΠ°ΠΉΡΠΎΠ².
- www.templatemo.com β ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ ΡΠ΅ΠΌ, ΠΊΡΠΎ Π½Π΅ Π³ΠΎΠ½ΠΈΡΡΡ Π·Π° ΡΠΊΡΠΊΠ»ΡΠ·ΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈΠ»ΠΈ ΡΠΏΠΎΡΠΎΠ±Π΅Π½ Π²Π½Π΅ΡΡΠΈ ΡΠ²ΠΎΠΈ ΠΏΡΠ°Π²ΠΊΠΈ Π² ΠΊΠΎΠ΄, ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ (framework) β ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΡΠΊΠ°Ρ ΡΠ°Π±Π»ΠΎΠ½Π°, Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΈ ΡΠ΅ΡΠΊΠ° Π±Π»ΠΎΠΊΠΎΠ². ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ Π»ΡΠ±ΡΡ ΠΈΡ Π·Π° ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ Π² ΡΠ°Π±ΠΎΡΠ΅ ΠΈ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π³ΠΎΡΠΎΠ²Π°Ρ Β«ΡΡΠ±Π°Β» ΡΠ°Π±Π»ΠΎΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅ ΡΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΡΡΠΈΠ½Ρ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΌΠ΅Π΅ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° β ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΠ³ΡΠΎΠΌΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² Π½Π° Π»ΡΠ±ΠΎΠΉ Π²ΠΊΡΡ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½Π° Π₯Π°Π±ΡΠ΅. ΠΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ· Π½ΠΈΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΡΡΠΆΠ΅Π»ΡΠ΅ Π² ΠΎΠ±ΡΠ΅ΠΌΠ΅. ΠΠΎΡΡΠΎΠΌΡ ΡΠ΅ΠΌ, ΠΊΡΠΎ Π»ΡΠ±ΠΈΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΏΠΈΡΠΎΠΊ Π»Π΅Π³ΠΊΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² ΠΎΡ Beloweb.ru. ΠΠ°ΠΎΠ΄Π½ΠΎ ΠΏΡΠΈΡΠΌΠΎΡΡΠΈΡΠ΅ΡΡ ΠΊ Π±Π»ΠΎΠ³Ρ, Π·Π΄Π΅ΡΡ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Β«Π²ΠΊΡΡΠ½ΡΡΠ΅ΠΊΒ» Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² ΠΈ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ².
Π‘Π΄Π΅Π»Π°ΡΡ Π²Π΅ΡΡΡΠΊΡ ΡΠ°ΠΌΠΎΠΌΡ
ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Π½Π΅ ΠΈΡΠ΅Ρ Π»Π΅Π³ΠΊΠΈΡ ΠΏΡΡΠ΅ΠΉ ΠΈ Ρ ΠΎΡΠ΅Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΠΎ ΡΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ, Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π΅ Π²Π΅ΡΠΈ:
ΠΠ΅ΡΠ°-ΡΠ΅Π³ viewport
ΠΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π·Π°ΡΠ΅Π» Π½Π° ΡΠ°ΠΉΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ Π²Π΅ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. ΠΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π² head ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.<meta name="viewport" content="width=device-width, initial-scale=1.0" />
ΠΡΠ°Π²ΠΈΠ»ΠΎ @media
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΠ΄Π½ΠΈΡ
ΠΈ ΡΠ΅Ρ
ΠΆΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠ²ΠΎΠ΅ΠΌ css-ΡΠ°ΠΉΠ»Π΅. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
#left{ width: 600px; float: left; margin-right: 10px; } #right{ width: 400px; float: right; } @media only screen and (max-width: 1010px){ #left, #right{ width: 98%; float: none; margin: 10px auto; } }
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π±Π»ΠΎΠΊ #left ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ»Π΅Π²Π° ΠΎΡ Π±Π»ΠΎΠΊΠ° #right ΡΠΈΡΠΈΠ½ΠΎΠΉ 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎ Π΅ΡΠ»ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ° ΠΌΠ΅Π½ΡΡΠ΅ 1010 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΌΡ ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Ρ ΠΎΠ±ΠΎΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌ ΠΈΡ Π½Π° 98% ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
Π Π²ΠΎΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΠΎΠ΄ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ²:
- 320px Π΄Π»ΡiPhone 3-5 Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
- 480px Π΄Π»Ρ iPhone 3-4 Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
- 568px Π΄Π»Ρ iPhone 5 Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
- 384px Π΄Π»Ρ ΡΠΌΠ°ΡΡΡΠΎΠ½Π° Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
- 600px Π΄Π»Ρ ΡΠΌΠ°ΡΡΡΠΎΠ½Π° Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
- 768px Π΄Π»Ρ iPad Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
- 1024px Π΄Π»Ρ iPad Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ
ΠΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° responsinator. com ΠΈΠ»ΠΈ Π² ΠΎΡΡΠ΅ΡΠ΅ Π―Π½Π΄Π΅ΠΊΡ.ΠΠ΅ΡΡΠΈΠΊΠΈ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° (ΡΠ°Π·Π΄Π΅Π» Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ/Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΈΡΠΏΠ»Π΅Π΅Π²). ΠΠ΄Π½ΠΈΠΌ ΡΠ»ΠΎΠ²ΠΎΠΌ, ΡΠ΅ΠΌ, ΠΊΡΠΎ Π·Π½Π°ΠΊΠΎΠΌ Ρ Π²Π΅ΡΡΡΠΊΠΎΠΉ ΡΠ°ΠΉΡΠΎΠ², Π½Π΅ ΡΡΡΠ΄Π½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΡΡΠΎΠΌ Π²ΠΎΠΏΡΠΎΡΠ΅.
ΠΡ Π·Π½Π°Π΅ΡΠ΅, Ρ ΡΠ΅Π΄ΠΊΠΎ Π΄Π°Ρ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΊΡΡΡΡ (ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΡΠΎ, ΡΠ΅ΠΌ ΡΠ°ΠΌΠ° Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»Π°ΡΡ), Π½ΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΡΡΡΠΈΠΉ ΠΎΠ±ΡΡΠ°ΡΡΠΈΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ ΠΈΠ· Π²ΡΠ΅Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ½Π΅ Π΄ΠΎΠ²ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΡΠΌΠΎΡΡΠ΅ΡΡ. ΠΠΌΠ΅Π½Π½ΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΠΈΡ Π°ΠΈΠ»Ρ ΡΠ°Π±Π»ΠΎΠ½ ΠΌΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π° ΡΠ΅ΠΏΠ΅ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½ ΠΏΠΎΠ΄ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π°, ΠΎΠ½ ΡΡΠ°Π» Π»Π΅Π³ΡΠ΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈ Π»ΡΡΡΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ ΠΏΠΎΠ΄ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ.
ΠΡΡΠ°ΡΠΈ, Π΅ΡΠ»ΠΈ ΡΠΈΡΠ°Π΅ΡΠ΅ ΡΡΠ°ΡΡΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ, Π½Π°ΠΏΠΈΡΠΈΡΠ΅, Π²ΡΠ΅ Π»ΠΈ Π½Π° ΠΌΠ΅ΡΡΠ΅, Π²ΡΠ΅ Π»ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎ? Π Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π²ΡΠ΅. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ β Π΄ΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΎΠ½ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ .
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ
ΠΠ° Π·Π°ΡΠ΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠ·Π΄Π°Π²Π°Π»ΠΈΡΡ Π΄Π»Ρ ΡΠΊΡΠ°Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΡΠ»ΠΈ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ» ΡΠΊΡΠ°Π½ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΌ ΠΎΠΆΠΈΠ΄Π°Π» Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ, ΡΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΌΠΎΠ³ Π±ΡΡΡ ΠΎΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΄ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ ΠΈ ΠΏΠ»ΠΎΡ ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½ΠΎΠ², ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ (Π°Π΄Π°ΠΏΡΠΈΠ²ΠΎΠ³ΠΎ) Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° (responsive web design (RWD))Β β Π½Π°Π±ΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΊΡΠ°Π½Π°, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Ρ.Π΄. ΠΡΠΎ ΡΠ° ΡΠ°ΠΌΠ°Ρ, ΠΈΠ΄Π΅Ρ ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π²Π΅Π±Π° Π΄Π»Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΡΡΡΠΎΠΉΡΡΠ², ΠΈ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠΌΠΎΠΆΠ΅ΠΌ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠ²ΠΎΠΈΡΡ Π΅Π³ΠΎ.
Π ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΈΡΡΠΎΡΠΈΠΈ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Ρ Π²Π°Ρ Π±ΡΠ»ΠΎ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ°:
- ΠΡ ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΠΆΠΈΠ΄ΠΊΠΈΠΉ ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°
- ΠΈΠ»ΠΈ ΡΠ°ΠΉΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
ΠΡΠΈ Π΄Π²Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΠ»ΠΈ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π» Π½Π° ΡΠΊΡΠ°Π½Π΅ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ°, ΡΠΎΠ·Π΄Π°Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡ! ΠΠΈΠ΄ΠΊΠΈΠΉ ΡΠ°ΠΉΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΠ» ΠΊ ΡΠ°Π·Π΄Π°Π²Π»Π΅Π½Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ (ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½ΠΈΠΆΠ΅) ΠΈ Π½Π΅ ΡΠΈΡΠ°Π΅ΠΌΠΎ Π΄Π»ΠΈΠ½Π½ΡΠΌ ΡΡΡΠΎΠΊΠ°ΠΌ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ .
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΆΠΈΠ΄ΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ: ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄. ΠΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΠΉΡΠ΅ ΠΈ ΡΠΆΠΈΠΌΠ°ΠΉΡΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΡΠΈ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ .
Π‘Π°ΠΉΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΈΡΠΊΠΎΠ²Π°Π» ΠΈΠΌΠ΅ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ ΠΌΠ΅Π½ΡΡΠΈΡ ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Π° ΡΠ°ΠΉΡΠ° (ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½ΠΈΠΆΠ΅) ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π±Π΅Π»ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π½Π° ΠΊΡΠ°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ .
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ: ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄. Π‘Π½ΠΎΠ²Π° ΠΈΠ·ΡΡΠΈΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π‘ΠΊΡΠΈΠ½ΡΠΎΡΡ Π²ΡΡΠ΅ ΡΠ΄Π΅Π»Π°Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Responsive Design Mode Π² Firefox DevTools.
ΠΠΎΠ³Π΄Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ Π²Π΅Π± ΡΡΠ°Π» ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΡΡ Ρ ΠΏΠ΅ΡΠ²ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°ΠΌΠΈ, ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΆΠ΅Π»Π°ΡΡΠΈΠ΅ ΠΎΡ Π²Π°ΡΠΈΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΈΠΊΠΈ Π½Π°ΡΠ°Π»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΡΠ²ΠΎΠΈΡ ΡΠ°ΠΉΡΠΎΠ², Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ URL (ΡΠ°ΡΡΠΎ ΡΡΠΎ-ΡΠΎ Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ m.example.com ΠΈΠ»ΠΈ example.mobi). ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π»ΠΎ, ΡΡΠΎΒ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡΠ»ΠΎ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π² Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π΄Π²Π΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ°.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΡΡ ΡΠ°ΡΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π»ΠΈ ΠΎΡΠ΅Π½Ρ ΡΡΠ΅Π·Π°Π½Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π³Π°Π΄ΠΆΠ΅ΡΡ ΡΡΠ°Π»ΠΈ ΠΌΠΎΡΠ½Π΅Π΅ ΠΈ ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ΅Π»ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°Π»ΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°Π»ΠΈ ΡΠ΅Π±Ρ Π·Π°ΠΏΠ΅ΡΡΡΠΌΠΈ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ°, Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π·Π½Π°Π»ΠΈ, Π΅ΡΡΡ Π² ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ°.
ΠΡΠ»ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΆΠΈΠ΄ΠΊΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ. Π 2004 Π³ΠΎΠ΄Ρ ΠΠ°ΠΌΠ΅ΡΠΎΠ½ ΠΠ΄Π°ΠΌΡ Π½Π°ΠΏΠΈΡΠ°Π» ΠΏΠΎΡΡ Resolution dependent layout, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠ³ Π±Ρ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌ ΡΠΊΡΠ°Π½Π°. ΠΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΡΠ΅Π±ΠΎΠ²Π°Π», ΡΡΠΎΠ±Ρ JavaScript ΡΠ·Π½Π°Π²Π°Π» ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π» ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΡΠΉ CSS.
ΠΠΎΠΈ ΠΠΈΠΊΠΊΠ΅Π»ΠΈ ΠΠΈΠ»Π»Π΅Π½Π²ΠΎΡΠ΅Ρ ΡΡΠ³ΡΠ°Π»Π° Π²Π°ΠΆΠ½ΡΡ ΡΠΎΠ»Ρ Π² ΡΠ²ΠΎΠΉ ΡΠ°Π±ΠΎΡΠ΅ ΠΎΠΏΠΈΡΠ°Π² ΠΈ ΡΠΎΡΠΌΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½Ρ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ°ΠΉΡΡ, ΠΏΡΡΠ°ΡΡΡ Π½Π°ΠΉΡΠΈ Π·ΠΎΠ»ΠΎΡΡΡ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π° ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.
Π’Π΅ΡΠΌΠΈΠ½ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ» ΠΡΠΈΠ΄ΡΠΌΠ°Π½ ΠΡΠ°Π½ΠΎΠΌ ΠΠ°ΡΠΊΠΎΡΡΠΎΠΌ Π² 2010 Π³ΠΎΠ΄Ρ ΠΈ ΠΎΠΏΠΈΡΡΠ²Π°Π» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ.
- ΠΠ΅ΡΠ²ΠΎΠΉ Π±ΡΠ»Π° ΠΈΠ΄Π΅Ρ ΠΆΠΈΠ΄ΠΊΠΈΡ ΡΠ΅ΡΠΎΠΊ, Π½Π΅ΡΡΠΎ ΡΡΠΎ ΡΠΆΠ΅ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π»Π° ΠΠΈΠ»Π»Π΅Π½Π²ΠΎΡΠ΅Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² ΡΡΠ°ΡΡΠ΅ ΠΠ°ΡΠΊΠΎΡΡΠ° — Fluid Grids (ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π² 2009 Π² A List Apart).
- ΠΡΠΎΡΡΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Π±ΡΠ»Π° ΠΈΠ΄Π΅Ρ ΠΆΠΈΠ΄ΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°
max-width
Π½Π°100%
, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΆΠ΅ ΡΠ΅ΠΌ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠ΅. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΡΠΎΠ»Π±ΡΡ Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Π° Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ Ρ Π½ΠΈΠΌ, Π½ΠΎ Π½Π΅ ΡΠ°ΡΡΠΈ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΡΠΌ Π΅ΡΠ»ΠΈ ΡΡΠΎΠ»Π±Π΅Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. - Π’ΡΠ΅ΡΡΠΈΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ Π±ΡΠ» media query. Media Query ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΈΠΏ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠΎΠ»ΡΠΊΠΎ CSS ΡΠΎ, ΡΡΠΎ ΠΠ°ΠΌΠ΅ΡΠΎΠ½ ΠΠ΄Π°ΠΌΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π», ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ JavaScript. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½ΠΎΠ², ΠΌΠ°ΠΊΠ΅Ρ ΠΌΠΎΠ³ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ. ΠΠΎΠΊΠΎΠ²ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π΄Π»Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ², Π»ΠΈΠ±ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.
ΠΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ β ΡΡΠΎ Π½Π΅ ΠΎΡΠ΄Π΅Π»ΡΠ½Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, ΡΡΠΎ ΡΠ΅ΡΠΌΠΈΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ, ΡΡΠΎΠ±Ρ ΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΈΠ»ΠΈ Π½Π°Π±ΠΎΡ Π»ΡΡΡΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. Π ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΈ ΠΠ°ΡΠΊΠΎΡΡΠ° ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π»ΠΎ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ (Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ floats) ΠΈ media query, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΡΡΠΈ Π·Π° 10 Π»Π΅Ρ, ΠΏΡΠΎΡΠ΅Π΄ΡΠΈΡ Ρ ΠΌΠΎΠΌΠ΅Π½ΡΠ° Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ°Π±ΠΎΡΠ° ΡΡΠ°Π»Π° ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° CSS ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Ρ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠΈ, ΠΈ Ρ Π½Π°Ρ Π΅ΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΡΡΡΠΊΠΈ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π² Π²Π΅Π±-ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΡΠ°ΠΉΡΠΎΠ² ΠΏΡΠΎΡΠ΅.
ΠΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΡΠΊΠ°ΠΆΠ΅Ρ Π²Π°ΠΌ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π²Π΅Π±-ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ» ΡΠΏΠΎΡΠΎΠ±Π΅Π½ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ media query. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Media Queries Level 3 ΡΡΠ°Π»Π° Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½ΡΠΌ ΠΠ°Π½Π΄ΠΈΠ΄Π°ΡΠΎΠΌ Π² 2009 Π³ΠΎΠ΄Ρ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½Π° Π±ΡΠ»Π° ΠΏΡΠΈΠ·Π½Π°Π½Π° Π³ΠΎΡΠΎΠ²ΠΎΠΉ ΠΊ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π½Π°ΠΌ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΡ ΡΠ΅ΡΠΈΡ ΡΠ΅ΡΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΡΠΊΡΠ°Π½ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈΠ»ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅) ΠΈΒ Π²ΡΠ±ΠΎΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ CSS ΠΊ ΡΡΠΈΠ»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Ρ Π½ΡΠΆΠ΄Π°ΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π»ΠΈ ΡΠ΅ΠΊΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΊΠ°ΠΊ ΡΠΊΡΠ°Π½Π½Π°Ρ ΠΌΠ΅Π΄ΠΈΠ° (Π° Π½Π΅ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ°ΡΠ½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ) ΠΈ ΠΈΠΌΠ΅Π΅Ρ Π»ΠΈ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΈΡΠΈΠ½Ρ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 800 px. CSSΒ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ .container
ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΡΠΈ Π΄Π²Π΅ Π²Π΅ΡΠΈ ΠΈΡΡΠΈΠ½Ρ.
@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠΎΠ² Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΏΠΎΠ΄ΡΡΡΠ°ΠΈΠ²Π°Ρ Π²Π΅ΡΡ Π²Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠ°ΡΡΠΈ ΡΠ°ΠΊ ΡΡΠΎΠ± ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π°ΠΈΠ»ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΡΠΊΡΠ°Π½Π°. Π’ΠΎΡΠΊΠΈ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ media query ΠΈ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΌΠ°ΠΊΠ΅Ρ, ΠΈΠ·Π²Π΅ΡΡΠ½Ρ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ.
ΠΠ±ΡΠΈΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Media Queriy ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΎΠ΄Π½ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΡΠ·ΠΊΠΈΠΌΠΈ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ), Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π΄Π»Ρ Π±ΠΎ’Π»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ Ρ Π²Π°Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π° ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΠ΅. ΠΡΠΎ ΡΠ°ΡΡΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΡΠ½Π°ΡΠ°Π»Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ (mobile first).
Π£Π·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Media Query ΠΌΠΎΠΆΠ½ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ MDN.
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠΌΠΈ ΡΠΎΡΠΊΠ°ΠΌΠΈ, ΠΎΠ½ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½Ρ Π½Π° Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ΅ΡΠΊΠ°Ρ . ΠΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ° ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ ΡΡΠΎ Π²Π°ΠΌ Π½Π΅ Π½Π°Π΄ΠΎ Π·Π°Π±ΠΎΡΠΈΡΡΡΡ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΌ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΡΡΡΠΎΠΈΡΡ Π΄Π»Ρ Π½ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ . Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π±ΡΠ» Π±Ρ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ ΡΠΈΡΠΎΠΊΠΎΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΊΠ°ΠΊ ΠΈ ΡΠ°ΠΊΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π΄Π°ΠΆΠ΅ Π½Π° ΠΠ Π»ΡΠ΄ΠΈ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡΠΌ Π΄ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠ° ΠΎΠΊΠ½ΠΎΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΠΈΠ±ΠΊΡΡ ΡΠ΅ΡΠΊΡ, Π²Π°ΠΌ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π½Π°Π΄ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠΊΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΡΠΎΡΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° Π²Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠ»ΠΎΡ ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π΄Π»ΠΈΠ½Π° ΡΡΡΠΎΠΊΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π½Π΅ΡΠΈΡΠ°Π΅ΠΌΠΎ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°, ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ΄Π°Π²Π»Π΅Π½Π½ΡΠΌ Ρ Π΄Π²ΡΠΌΡ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΏΡΠΈ ΡΡΠΆΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π°.
Π ΠΏΠ΅ΡΠ²ΡΠ΅ Π΄Π½ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½Π°ΡΠΈΠΌ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ floats. ΠΠΈΠ±ΠΊΠΈΠΉ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅ΠΌΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π΄ΠΎΡΡΠΈΠ³Π°Π»ΡΡ ΠΏΡΡΠ΅ΠΌ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠ΄ΠΎΡΡΠΎΠ²Π΅ΡΠΈΠ²ΡΠΈΡΡ, ΡΡΠΎ ΠΈΡΠΎΠ³ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ 100%. Π ΡΠ²ΠΎΠ΅ΠΉ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΎ ΠΏΠ»Π°Π²ΡΡΠΈΡ ΡΠ΅ΡΠΊΠ°Ρ ΠΠ°ΡΠΊΠΎΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π» ΡΠΎΡΠΌΡΠ»Ρ Π΄Π»Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π² ΠΏΡΠΎΡΠ΅Π½ΡΡ.
target / context = result
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°Β β 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ (ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ) Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΒ β 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎ ΠΌΡ Π΄Π΅Π»ΠΈΠΌ 60 Π½Π° 960 ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π½Π°ΡΠ΅ΠΌ CSS, ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ° Π΄Π΅ΡΡΡΠΈΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° 2 ΡΠΈΡΡΡ.
.col {
width: 6.25%;
}
ΠΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΠΈ ΠΎΠ½ Π·Π°Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ Π·Π΄Π΅ΡΡ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π² Π½Π°ΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ Π£ΡΡΠ°ΡΠ΅Π²ΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². Π Π²Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅ Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΡΠΎ Π²Ρ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΌΠΈ ΡΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΠΈΡ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ Π΅Π³ΠΎ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π±ΡΠ΄Π΅ΡΠ΅ ΡΡΡΠΎΠΈΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° float.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Media Query ΠΈ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ. ΠΠ° ΡΠ·ΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π±Π»ΠΎΠΊΠΈ, ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°:
ΠΠ° Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ ΠΎΠ½ΠΈ ΠΏΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π² Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ°:
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, Flexbox, ΠΈ Grid ΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ½ΠΈ Π²ΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΡΡ, ΡΡΠΎ Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΈΠ±ΠΊΡΡ ΡΠ΅ΡΠΊΡ ΠΈ Π΄Π°ΡΡ Π²Π°ΠΌ Π±ΠΎΠ»Π΅Π΅ Π»Π΅Π³ΠΊΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ.
Multicol
Π‘Π°ΠΌΡΠΉ ΡΡΠ°ΡΡΠΉ ΠΈΠ· ΡΡΠΈΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ²Β β ΡΡΠΎ multicol, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π°Π΄Π°Π΅ΡΠ΅ column-count
, ΡΡΠΎ ΠΎΡΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎ Π½Π° ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ°Π·Π±ΠΈΡΡ Π²Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΠ°Π»Π΅Π΅ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅Ρ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°.
.container {
column-count: 3;
}
ΠΡΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Ρ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ column-width
, ΡΠΎ Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠ°ΡΠ·Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΡΠ΄Π΅Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π²ΡΠ΅ΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ. ΠΠΎΡΡΠΎΠΌΡ ΡΠΈΡΠ»ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΠΎΠΌΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΌΠ΅ΡΡΠ°.
.container {
column-width: 10em;
}
Flexbox
Π Flexbox,Β Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, flex ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ ΠΈ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎΠΌ Π² ΠΈΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. ΠΠ·ΠΌΠ΅Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΒ flex-grow
ΠΈ flex-shrink
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΡ Π²Π΅Π»ΠΈ ΡΠ΅Π±Ρ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡΡ Ρ Π±ΠΎ’Π»ΡΡΠΈΠΌ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠΈΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎΠΌ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅Π±Ρ.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ flex ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ°Π²Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π²ΠΎ flex ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π·Π°ΠΏΠΈΡΡ flex: 1
ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² Π³Π»Π°Π²Π΅ Flexbox: ΠΠΈΠ±ΠΊΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² flex ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
.container {
display: flex;
}
.item {
flex: 1;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΡ ΠΏΠ΅ΡΠ΅ΡΡΡΠΎΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π²ΡΡΠ΅, Π² ΡΡΠΎΡ ΡΠ°Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ flexbox. ΠΡ Π²ΠΈΠ΄ΠΈΡΠ΅ ΡΡΠΎ Π½Π°Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½Π°Π΄ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ°Π½Π½ΡΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΡΠ΅ΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΎΠ»Π±ΡΠΎΠ²: ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄.
CSS grid
Π ΠΌΠ°ΠΊΠ΅ΡΠ΅ CSS Grid Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ fr
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π΄ΠΎΡΠΎΠΆΠΊΠ°ΠΌΠΈ ΡΠ΅ΡΠΊΠΈ. Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ grid ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΡΡΠ΅ΠΌΡ Π΄ΠΎΡΠΎΠΆΠΊΠ°ΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1fr
. ΠΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π΄ΠΎΡΠΎΠΆΠΊΠΈ, ΠΊΠ°ΠΆΠ΄Π°Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡΠ°Ρ ΠΎΠ΄Π½Ρ ΡΠ°ΡΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π΅ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ Π² ΡΠ΅ΠΌΠ΅ ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΠΠ°ΠΊΠ΅ΡΠ° Grid Π² ΡΠ°Π·Π΄Π΅Π»Π΅Β ΠΠΈΠ±ΠΊΠΈΠ΅ grids Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ fr.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π²Π΅ΡΡΠΈΡ grid ΠΌΠ°ΠΊΠ΅ΡΠ° Π΅ΡΠ΅ ΠΏΡΠΎΡΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΎΠ»Π±ΡΡ Π² .wrapper: ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π±ΡΠ» ΠΎΠΏΠΈΡΠ°Π½ Π² ΡΠ°Π½Π½ΠΈΡ ΡΡΠ°ΡΡΡΡ ΠΠ°ΡΠΊΠΎΡΡΠ° ΠΏΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ. ΠΠΎ ΡΡΡΠΈ, Π²Ρ Π±Π΅ΡΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠ³Π»ΠΎ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ, ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΠ΅ Π΅Π³ΠΎ. ΠΡΠΎΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ CSS:
img {
max-width: 100%;
}
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΠΊ ΡΡΠΎΠΌΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΡΠΎΠΉ ΡΡΠ°ΡΠΎΠΉ ΠΏΡΠΎΠΏΡΡΠΊΠ½ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΒ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· ΠΏΡΠ΅Π²ΡΡΠ°ΡΡΠ΅Π΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ½ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΈΠ΄ΠΈΡ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, ΠΊΠ°ΠΊ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅. ΠΠΈΠ±ΠΎ, ΡΡΠΈΡΡΠ²Π°Ρ ΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΠ΅Π»Π΅ΡΠΎΠ½Π΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Ρ ΠΎΡΠ΅ΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π»Π΅Π³ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΌ ΡΠΊΡΠ°Π½Π΅. Π’Π°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡΠΈΡΡ, ΠΏΡΠΎΡΡΠΎ ΡΠΌΠ΅Π½ΡΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <picture>
ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ srcset
ΠΈ sizes
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <img>
ΠΎΠ±Π° ΡΠ΅ΡΠ°ΡΡ ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π²ΠΌΠ΅ΡΡΠ΅ Ρ Β«ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°ΠΌΠΈΒ» (ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ), ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ±Π΅ΡΠ΅Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π°Π³ΡΡΠ·ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΏΡΡΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΡΠ°Π·Π½ΠΎΠ΅ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΈΡΡΡΠ΅Π½ΠΈΡ HTML Π½Π° MDN.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½Π΅ ΠΎΡΠ²Π΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π½Π΅Π΅ Π² ΡΠ°Π±ΠΎΡΠ΅, Π±ΡΠ»Π° ΠΈΠ΄Π΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΈ. ΠΠ»Π°Π²Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ½Π° ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ media queries Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π±ΠΎ’Π»ΡΡΡΡ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΡΡ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΡΠΊΡΠ°Π½Π°.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ Ρ
ΠΎΡΠΈΠΌ Π·Π°Π΄Π°ΡΡ Π½Π°ΡΠ΅ΠΌΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ 4rem
, ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π² ΡΠ΅ΡΡΡΠ΅ ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅ Π½Π°ΡΠ΅Π³ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ! ΠΡ Ρ
ΠΎΡΠΈΠΌ ΡΡΠΎΡ Π³ΠΈΠ³Π°Π½ΡΡΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΡΠ½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΌΠ΅Π½ΡΡΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ media queries ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠΊΡΠ°Π½ΠΎΠ² Π΅ΡΠ»ΠΈ ΠΌΡ Π·Π½Π°Π΅ΠΌ ΡΡΠΎ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΅ΡΡΡ ΡΠΊΡΠ°Π½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 1200px
.
html {
font-size: 1em;
}
h2 {
font-size: 2rem;
}
@media (min-width: 1200px) {
h2 {
font-size: 4rem;
}
}
ΠΡ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π»ΠΈ Π½Π°Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ grid, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π» Π² ΡΠ΅Π±Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΠΈΠΏ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ°ΠΊΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ Π² Π²Π΅ΡΡΠΈΡ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ.
Π ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠ΅Π½ΡΡΠ΅:
ΠΠ° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ , ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ Π±ΠΎΠ»ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°:
Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π²Π°ΠΌ Π½Π΅ Π½Π°Π΄ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡ media queries ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΌ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΡΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΡΠΊΡΠ°Π½Π°.
Using viewport units for responsive typography
An interesting approach is to use the viewport unit vw
to enable responsive typography. 1vw
is equal to one percent of the viewport width, meaning that if you set your font size using vw
, it will always relate to the size of the viewport.
h2 {
font-size: 6vw;
}
The problem with doing the above is that the user loses the ability to zoom any text set using the vw
unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.
There is a solution, and it involves using calc()
. If you add the vw
unit to a value set using a fixed size such as em
s or rem
s then the text will still be zoomable. Essentially, the vw
unit adds on top of that zoomed value:
h2 {
font-size: calc(1.5rem + 3vw);
}
This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.
If you look at the HTML source of a responsive page, you will usually see the following <meta>
tag in the <head>
of the document.
<meta name="viewport" content="width=device-width,initial-scale=1">
This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.
Why is this needed? Because mobile browsers tend to lie about their viewport width.
This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.
The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width
you are overriding Apple’s default width=960px
with the actual width of the device, so your media queries will work as intended.
So you should always include the above line of HTML in the head of your documents.
There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.
initial-scale
: Sets the initial zoom of the page, which we set to 1.height
: Sets a specific height for the viewport.minimum-scale
:Β Sets the minimum zoom level.maximum-scale
:Β Sets the maximum zoom level.user-scalable
: Prevents zooming if set tono
.
You shouldΒ avoid using minimum-scale
, maximum-scale
, and in particular setting user-scalable
to no
. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.
Note: There is a CSS @ rule designed to replace the viewport meta tag β @viewport β however, it has poor browser support. When both are used the meta tag overrides @viewport.
Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone β it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.
It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.
5 ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Photoshop
Photoshop β ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π΅ΠΉΡΠ°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΠ΅Π΄ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ², Π° Ρ ΡΠ°ΠΊΠΈΠΌΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ, ΠΊΠ°ΠΊ CSS3Ps ΠΈ FontAwesomePS ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ² Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Π»ΠΈ Π½Π΅ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ. Π ΡΡΠΈΡΡΠ²Π°Ρ ΡΠ°ΡΡΡΡΠΈΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ Π²ΡΡΠΎΠΊΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, CSS ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠ°ΠΌ, CSS ΡΠ°ΠΌΠΊΠ°ΠΌ ΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΠΉ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠ΅ (SVG), Photoshop ΡΠ΅ΡΡΠ΅Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ Π² ΡΡΠ΅ΡΠ΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ±Π΅Π»Ρ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ, ΡΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄ΡΡ Photoshop.
1. WebFlow
WebFlow ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΎΠΏΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ drag-and-drop. ΠΡΠΎΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΌΠ°ΠΊΠ΅Ρ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΡΠ΅ΡΠΊΠ΅ Bootstrap ΠΈ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΠ°ΠΊΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, ΡΠΏΠΈΡΠΊΠΈ ΠΈ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅Π΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ WebFlow.
ΠΠ° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»ΠΈ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ΄Π΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½, ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΠΊΠΎΠ΄ HTML ΠΈ CSS. Π’Π°ΠΊΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠΎΠΉ.
2. Avocode
Avocode ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ PSD ΡΠ°ΠΉΠ»Ρ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ ΠΈΡ Π² ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΡΠΉ ΡΠ°ΠΉΡ Ρ HTML ΠΈ CSS. Avocode ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅Ρ Π²ΡΠ΅ Π°ΠΊΡΠΈΠ²Ρ Π² Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ CSS, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ SVG (Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΡΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ). ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·Π²Π»Π΅ΡΡ CSS Π² Π²ΠΈΠ΄Π΅ Less, SASS ΠΈΠ»ΠΈ Stylus Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ Ρ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ CSSHat.
Avocode ΠΎΡΠ½Π°ΡΠ΅Π½ ΠΊΠΎΠ½ΡΡΠΎΠ»Π΅ΠΌ Π²Π΅ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΊ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ Π½Π° ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠΉΠ΄Π΅Ρ Π½Π΅ ΡΠ°ΠΊ.
3. Macaw
Macaw ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅ΡΡ ΠΈ Π²Π΅Π±-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Ρ ΡΠ°ΠΊΠΈΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠΌ, ΠΊΠ°ΠΊ Adobe Photoshop. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠΎΠ»Π±ΡΡ ΠΈΠ»ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅. Macaw ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, ΡΡΠΎΠ±Ρ Ρ ΡΠ°Π½ΠΈΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Macaw ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π²Π΅ΡΡΠ΅Π½, Macaw ΠΌΠΎΠΆΠ΅Ρ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ HTML ΠΈ CSS.
4. Sketch
Sketch ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ² ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ, Π° Π½Π΅ ΡΠ°ΡΡΡΠΎΠ²ΡΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ Ρ ΠΎΠ»ΡΡΠ°, Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ ΡΡΡΠ°ΡΠΈΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ. Π’Π°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ Β«built-in gridΒ» ΠΏΠΎΠΌΠΎΠ³ΡΡ Π»ΡΡΡΠ΅ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈΠ»ΠΈ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅ΡΠ°.
Sketch ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΡΠΈΡΡΡ, ΠΏΠΎΡ ΠΎΠΆΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Webkit (Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Chrome, Opera ΠΈ Safari). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ Π½Π΅ ΡΠ΅Π·ΠΊΠΎΠ³ΠΎ ΠΈ Π½Π΅ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΠΎΠΌ. Sketch ΠΌΠΎΠΆΠ΅Ρ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ CSS Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠ»ΠΎΠ΅.
5. Antetype
Antetype β Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠ°ΠΊ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ, ΡΠ΅Π½Ρ, Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ, ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΈΠ»Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ. Antetype ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΡΠ½ΠΈ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΡΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ CSS.
HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°
HTML ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π° ΠΈ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΠΉ ΠΊΠΎΠ΄.
HTML
Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π²Π²ΠΎΠ΄Π° Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
ΠΌΠΎΠ½ΠΎΡΠΈΡΠΈΠ½Π½ΡΠΉ ΡΡΠΈΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊ Π²Π²ΠΎΠ΄ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅:
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Π½Π°ΠΆΠ°Π² Ctrl + S
ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Π½Π°ΠΆΠ°Π² Ctrl + S
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ "HTML
Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΠ»Π΅ΠΌΠ΅Π½Ρ HTML
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΈΠ· ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ.Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²
ΠΌΠΎΠ½ΠΎΡΠΈΡΠΈΠ½Π½ΡΠΉ ΡΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅:
Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°:
Π€Π°ΠΉΠ» Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ F1, ΡΡΠΎΠ±Ρ
ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ
ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°: Π€Π°ΠΉΠ» Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ F1, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ
HTML
Π΄Π»Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°: ΠΊΠΎΠ΄ ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²
ΠΌΠΎΠ½ΠΎΡΠΈΡΠΈΠ½Π½ΡΠΉ ΡΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅:
x = 5;
Ρ = 6;
Π³ = Ρ
+ Ρ;
ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Ρ
= 5;
Ρ = 6;
Π³ = Ρ
+ Ρ;
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ " ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π½Π΅ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ Π»ΠΈΡΠ½ΠΈΠ΅ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΈ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ.
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
:
ΠΡΠΈΠΌΠ΅Ρ
x = 5;
Ρ = 6;
Π³ = Ρ
+ Ρ;
ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Ρ
= 5;
Ρ = 6;
Π³ = Ρ
+ Ρ;
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ "
HTML
Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML
Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π² ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.Π
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΡΡΡΠΈΠ²ΠΎΠΌ.
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅:
ΠΠ»ΠΎΡΠ°Π΄Ρ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°: 1/2 x b x h , Π³Π΄Π΅ b - ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠ΅, Π° h - Π²ΡΡΠΎΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ.
ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ»ΠΎΡΠ°Π΄Ρ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°: 1/2 x b x h , Π³Π΄Π΅ b - ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠ΅, Π° h - Π²ΡΡΠΎΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ "
ΠΡΠ°ΡΠΊΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π³Π»Π°Π²Ρ
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ
Π²Π²ΠΎΠ΄ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ - ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ
ΠΏΡΠΈΠΌΠ΅Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ - ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°ΡΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π² ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΈ - ΠΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ
ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ
Π£ΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡ HTML
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° HTML
Π’Π΅Π³
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
<ΠΊΠΎΠ΄>
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΠΉ ΠΊΠΎΠ΄
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²Π²ΠΎΠ΄ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΠ²ΠΎΠ΄ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ - Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ HTML ΠΈ CSS
Π£ΡΠΎΠΊ 4
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅
4
HTML
CSS
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ Π²Π·Π»Π΅ΡΠ΅Π» Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ ΠΊΡΠΎ-Π»ΠΈΠ±ΠΎ ΠΌΠΎΠ³ Π±Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ, ΠΎΠ½ ΡΠ°ΡΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΠΌΠ°ΡΡΠ΅Π΄ΡΠΈΠΉ. Π’Π΅ΠΏΠ΅ΡΡ, Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ, Π½Π° ΡΡΠ΅Π½Ρ ΡΠ΅Π·ΠΊΠΎ Π²ΡΡΠΎΡΠ»Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ ΡΠ²ΡΠ·Ρ. Π ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΠ΅ΡΠ΅ΠΆΠ°Π΅Ρ ΡΠΎΡΡ ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.
Π Π½Π°ΡΠΈ Π΄Π½ΠΈ ΡΡΡΠ΄Π½ΠΎ Π½Π°ΠΉΡΠΈ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅ Π±ΡΠ»ΠΎ Π±Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ², ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ
ΠΊ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΡ. Π ΠΠ΅Π»ΠΈΠΊΠΎΠ±ΡΠΈΡΠ°Π½ΠΈΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π»ΡΠ΄Π΅ΠΉ, ΠΈ, Π΅ΡΠ»ΠΈ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΠΈ ΡΠΎΡ
ΡΠ°Π½ΡΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΠΏΡΠ΅Π²ΡΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π³ΠΎΠ΄Π°.
Π‘ ΡΠΎΡΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π²ΡΡΠ°Π΅Ρ Π²ΠΎΠΏΡΠΎΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.ΠΡΠΎΠΌΡΡΠ»Π΅Π½Π½ΡΠΌ ΠΎΡΠ²Π΅ΡΠΎΠΌ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ ΡΡΠ°Π» Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ ΠΊΠ°ΠΊ RWD .
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΎΠ±Π·ΠΎΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ - ΡΡΠΎ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΈ ΡΠΊΡΠ°Π½Π΅ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°. ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ Π½Π° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΏΡΠΈΡΡΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ
. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² Π² ΡΠ°Π²Π½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ Π²ΡΠΈΠ³ΡΡΠ²Π°ΡΡ ΠΎΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
Π‘Π°ΠΌ ΡΠ΅ΡΠΌΠΈΠ½ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ» ΠΏΡΠΈΠ΄ΡΠΌΠ°Π½ ΠΈ Π² Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ ΠΡΠ°Π½ΠΎΠΌ ΠΠ°ΡΠΊΠΎΡΡΠΎΠΌ. ΠΠ½ΠΎΠ³ΠΎΠ΅ ΠΈΠ· ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅, Π²ΠΏΠ΅ΡΠ²ΡΠ΅ Π±ΡΠ»ΠΎ ΡΠ°ΡΡΠΊΠ°Π·Π°Π½ΠΎ ΠΡΠ°Π½ΠΎΠΌ Π² ΡΠ΅ΡΠΈ ΠΈ Π² Π΅Π³ΠΎ ΠΊΠ½ΠΈΠ³Π΅ Responsive Web Design , ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΎΠΈΡ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ.
Π€ΠΈΠ³.4
Π£ Food Sense ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° Π²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΈΠ»ΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π²Π΅Π±-ΡΠ°ΠΉΡ Food Sense Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ.
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ vs.ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ
ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ΅ΡΠΌΠΈΠ½ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ Π½ΠΎΠ²ΡΠΌ, Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΠ΅ΡΠΌΠΈΠ½Π°ΠΌΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ . Π§ΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π²Π°Ρ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ, Π² ΡΠ΅ΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ΅ΡΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½Ρ ΠΈ ΡΠ°ΡΡΠΎ Π·Π°ΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈ ΡΠ΅ΠΌ ΠΆΠ΅. ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π±ΡΡΡΡΠΎΠ΅ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠ²Π½ΠΎΠ΅ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Π»ΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π½ΠΎΠ²ΠΎΠΉ ΡΠ΅Π»ΠΈ ΠΈΠ»ΠΈ ΡΠΈΡΡΠ°ΡΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°ΠΊΡΠΎΡΠΎΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π³ΡΡΠΏΠΏΡ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ
ΡΠ°ΠΊΡΠΎΡΠΎΠ². ΠΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΎΠ±ΠΎΠΈΡ
ΠΈΠ΄Π΅Π°Π»ΡΠ½Π°, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΡ ΡΠΎΡΠΌΡΠ»Ρ Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ΅ΡΠΌΠΈΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Mobile, Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΎΠ±ΡΡΠ½ΠΎ Π² Π½ΠΎΠ²ΠΎΠΌ Π΄ΠΎΠΌΠ΅Π½Π΅, ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. Π₯ΠΎΡΡ ΠΈΠ½ΠΎΠ³Π΄Π° ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅ΡΡΠΎ, ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π½Π΅ Π»ΡΡΡΠ°Ρ ΠΈΠ΄Π΅Ρ.ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΈΠΌΠΈ, Π½ΠΎ ΠΎΠ½ΠΈ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π½ΠΎΠ²ΠΎΠΉ Π±Π°Π·Ρ ΠΊΠΎΠ΄Π° ΠΈ Π°Π½Π°Π»ΠΈΠ·Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΏΡΠ΅ΠΏΡΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΊΠ°ΠΊ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π°Π΅ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΠΎΠΊΠ½Π°ΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΠ΅Π½ΡΡ ΠΌΠ°ΠΊΠ΅Ρ ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π²ΡΠ΅ΠΌΠΈ ΡΡΠ΅ΠΌΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌΠΈ: ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ.
ΠΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°Π·Π±ΠΈΡ Π½Π° ΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ, ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°.ΠΠ΅ΡΠ²Π°Ρ ΡΠ°ΡΡΡ, Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ, - ΡΡΠΎ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Ρ Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ, ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΠΎ Π»ΡΠ±ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ. ΠΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ ΡΡΡΠΎΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ, ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΈΠ»ΠΈ em
Π΅Π΄ΠΈΠ½ΠΈΡ. ΠΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄Π»ΠΈΠ½Ρ Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ΅ΡΠΊΠΈ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΡΠΈΡΠΈΠ½Π°
, ΠΏΠΎΠ»Π΅
ΠΈΠ»ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π΄Π»ΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
CSS3 ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ» Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΠΎΠ²ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.ΠΡΠΈ Π½ΠΎΠ²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ vw
, vh
, vmin
ΠΈ vmax
. Π ΡΠ΅Π»ΠΎΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΠΈΡ
Π½ΠΎΠ²ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² Π½Π΅Π²Π΅Π»ΠΈΠΊΠ°, Π½ΠΎ ΠΎΠ½Π° ΡΠ°ΡΡΠ΅Ρ. Π‘ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ ΠΎΠ½ΠΈ Π·Π°Ρ
ΠΎΡΡΡ ΡΡΠ³ΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΡΠΎΠ»Ρ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
-
VW
Π¨ΠΈΡΠΈΠ½Π° ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
-
vh
ΠΡΡΠΎΡΠ° Π²ΠΈΠ΄ΠΎΠ²ΡΡ
ΡΠΊΡΠ°Π½ΠΎΠ²
-
vmin
ΠΠΈΠ½ΠΈΠΌΡΠΌ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
-
vmax
ΠΠ°ΠΊΡΠΈΠΌΡΠΌ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΠΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΠΈΠ»ΠΈ Π΄ΡΠΉΠΌΡ.ΠΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΊ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ. ΠΠ°ΠΊΠ΅ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊ ΡΡΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ. Π ΡΡΠ°ΡΡΡΡ, ΠΡΠ°Π½ ΡΠΊΠ°Π·Π°Π» Π½Π° ΠΏΡΠΎΡΡΡΡ ΡΠΎΡΠΌΡΠ»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
Π€ΠΎΡΠΌΡΠ»Π° ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΠΈΡΠΈΠ½Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ - ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
1
2
ΡΠ΅Π»Ρ Γ· ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ = ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ°
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠ° ΡΠΎΡΠΌΡΠ»Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΈΠ· Π΄Π²ΡΡ
ΡΡΠΎΠ»Π±ΡΠΎΠ². ΠΠΈΠΆΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ΅ ΠΏΠΎΠ΄ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ , ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
, ΠΎΠ±Π΅ΡΡΡΠ²Π°ΡΡΠΈΠΉ ΠΊΠ°ΠΊ , ΡΠ°ΠΊ ΠΈ ΡΠ°Π·Π΄Π΅Π», ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
. Π¦Π΅Π»Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΠΈΡ
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»Π°ΡΡ ΡΠ»Π΅Π²Π° ΠΈ Π² ΡΡΠΎΡΠΎΠ½Π΅,
ΡΠΏΡΠ°Π²Π°, Ρ ΡΠ°Π²Π½ΡΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ. ΠΠ±ΡΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ.
HTML
1
2
3
4
5
<ΡΠ°Π·Π΄Π΅Π»>...
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
ΡΠΈΡΠΈΠ½Π°: 538 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΡΠ°Π·Π΄Π΅Π»,
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
ΠΌΠ°ΡΠΆΠ°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΡΠ°Π·Π΄Π΅Π» {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 340 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
float: right;
ΡΠΈΡΠΈΠ½Π°: 158 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΡΠΌΡΠ»Ρ Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΈ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²Π·ΡΡΡ Π²ΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΠΈΡ
Π² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ.Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ, Π½ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΡ em
ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΎΠΊΠΈΠΌ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
, ΡΠ°Π·Π΄Π΅Π»Ρ
ΠΈ , Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»Π΅ΠΉ ΠΈ ΡΠΈΡΠΈΠ½Ρ
, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ.
1
2
3
4
5
6
7
8
9
10
11
12
13
ΡΠ΅ΠΊΡΠΈΡ,
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
ΠΌΠ°ΡΠΆΠ°: 1.858736059%; / * 10px Γ· 538px = 0,018587361 * /
}
ΡΠ°Π·Π΄Π΅Π» {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 63.197026%; / * 340px Γ· 538px =.63197026 * /
}
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
float: right;
ΡΠΈΡΠΈΠ½Π°: 29,3680297%; / * 158 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Γ· 538 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ = 0,293680297 * /
}
ΠΡΠΈΠ½ΡΡΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ ΡΠΎΡΠΌΡΠ»Ρ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΡ
ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ°ΡΡΡΠΌ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠΉ Π΄ΠΎ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ»Ρ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π² Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° min-width
, max-width
, min-height
ΠΈ max-height
.
ΠΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π° ΠΊ Π³ΠΈΠ±ΠΊΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ. ΠΠ½ΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ, ΡΡΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Ρ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ°ΠΊΠ΅Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΠΈΠ»ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΠΌ, ΡΠ΅ΠΊΡΡ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Π½Π΅ΡΠ°Π·Π±ΠΎΡΡΠΈΠ²ΡΠΌ, Π° ΠΌΠ°ΠΊΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π°ΡΠ°ΡΡ Π»ΠΎΠΌΠ°ΡΡΡΡ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΠ»ΡΡΡΠΈΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π±ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΈΠΏΠΎΠ² ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠΈ Π½Π°ΡΠ΅Π»ΠΈΠ²Π°Π½ΠΈΠΈ ΠΈ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ.ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ
ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ»ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΠΌΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²: ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° @media
Π²Π½ΡΡΡΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΈΠΌΠΏΠΎΡΡ Π½ΠΎΠ²ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π° @import
ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ·Π½ΡΡΡΠΈ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.ΠΠΎΠΎΠ±ΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @media
Π²Π½ΡΡΡΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ².
HTML
1
2
3
CSS
1
2
3
4
5
6
/ * ΠΡΠ°Π²ΠΈΠ»ΠΎ @media * /
@media all and (max-width: 1024px) {...}
/ * ΠΡΠ°Π²ΠΈΠ»ΠΎ @import * /
@import url (styles.css) all and (max-width: 1024px) {...}
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΠΈΠΏ ΠΌΠ΅Π΄ΠΈΠ°, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ±ΡΠΈΠ΅ ΡΠΈΠΏΡ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π²ΡΠ΅
, screen
, print
, tv
ΠΈ braille
. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ HTML5 Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π½ΠΎΠ²ΡΠ΅ ΡΠΈΠΏΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ Π΄Π°ΠΆΠ΅ 3D-ΠΎΡΠΊΠΈ
. ΠΡΠ»ΠΈ ΡΠΈΠΏ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π½Π΅ ΡΠΊΠ°Π·Π°Π½, ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΠΉ Π·Π°ΠΏΡΠΎΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΏ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° , ΡΠΊΡΠ°Π½
.
ΠΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° ΡΠΈΠΏΠΎΠΌ ΠΌΠ΅Π΄ΠΈΠ°, ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΈΡΡΠΈΠ½Π½ΡΠ΅ ΠΈΠ»ΠΈ Π»ΠΎΠΆΠ½ΡΠ΅. ΠΠΎΠ³Π΄Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ true, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ false, ΡΡΠΈΠ»ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ.
ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΡ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ
ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΡ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ
ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠΎΡΠ½ΡΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ
Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠ°, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΈ
, Π½Π΅
ΠΈ ΡΠΎΠ»ΡΠΊΠΎ
.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠΎΠ² ΠΈ
Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΠ΅, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡ, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π±ΡΠ΄ΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠ°ΠΊ , ΡΠ°ΠΊ ΠΈ
, b
, c
ΠΈ Ρ. Π. ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Ρ Π·Π°ΠΏΡΡΡΠΌΠΈ, Π΄Π΅ΠΉΡΡΠ²ΡΡ ΠΊΠ°ΠΊ Π½Π΅Π²ΡΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ ΠΈΠ»ΠΈ
. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΠ±ΠΈΡΠ°ΡΡΡΡ Π²ΡΠ΅ ΡΠΈΠΏΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΎΡ 800
Π΄ΠΎ 1024
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ.
1
2
@media all and (min-width: 800px) and (max-width: 1024px) {...}
ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ , Π° Π½Π΅
ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ Π·Π°ΠΏΡΠΎΡ, ΡΠΊΠ°Π·ΡΠ²Π°Ρ Π»ΡΠ±ΠΎΠΉ Π·Π°ΠΏΡΠΎΡ, ΠΊΡΠΎΠΌΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ, Π½Π΅ ΠΈΠΌΠ΅ΡΡΠ΅ΠΌΡ ΡΠ²Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°. ΠΠ΄Π΅ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΡΠ΅ ΠΈΠ»ΠΈ ΠΌΠΎΠ½ΠΎΡ
ΡΠΎΠΌΠ½ΡΠ΅ ΡΠΊΡΠ°Π½Ρ.
1
2
@media not screen and (color) {...}
ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ only
ΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΎΠ²ΡΠΌ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠΎΠΌ ΠΈ Π½Π΅ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌΠΈ Π°Π³Π΅Π½ΡΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΌΠΈ Π°Π»Π³ΠΎΡΠΈΡΠΌ HTML4, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΊΡΡΠ²Π°Ρ ΡΡΠΈΠ»ΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.ΠΠΈΠΆΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½Ρ Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
1
2
ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½ @media ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΊΠ½ΠΈΠΆΠ½Π°Ρ) {...}
ΠΠ΅Π· ΡΠΈΠΏΠ° Π½ΠΎΡΠΈΡΠ΅Π»Ρ
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ , Π° Π½Π΅
ΠΈ , ΡΠΎΠ»ΡΠΊΠΎ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠΎΠ²
, ΡΠΈΠΏ Π½ΠΎΡΠΈΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΈΠΏ Π½ΠΎΡΠΈΡΠ΅Π»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ - Π²ΡΠ΅
.
ΠΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΈ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ
ΠΠ½Π°Π½ΠΈΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΈ ΡΠ°Π±ΠΎΡΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠΎΠ² - ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, Π½ΠΎ Π½Π°ΡΡΠΎΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ. Π€ΡΠ½ΠΊΡΠΈΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ°.
ΠΡΡΠΎΡΠ°
ΠΈ ΡΠΈΡΠΈΠ½Π° Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ ΠΠ΄Π½Π° ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Π²ΡΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.ΠΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π°ΠΉΠ΄Π΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π²ΡΡΠΎΡΠ°
ΠΈ ΡΠΈΡΠΈΠ½Π°
. ΠΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΡΡΠΈΡ
ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡ min
ΠΈΠ»ΠΈ max
ΠΊΠ²Π°Π»ΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ², ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΡΠ°ΠΊΡΡ ββΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠ°ΠΊ min-width
ΠΈΠ»ΠΈ max-width
.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ Π²ΡΡΠΎΡΡ ,
ΠΈ ΡΠΈΡΠΈΠ½Ρ ,
ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΈΡ
ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅ΠΉ Π΄Π»ΠΈΠ½Ρ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ.
1
2
@media all and (min-width: 320px) ΠΈ (max-width: 780px) {...}
Π Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ min-width
ΠΈ max-width
. ΠΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π² ΡΠ°Π²Π½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ
ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
, ΠΈΠ·Π±Π΅Π³Π°Ρ ΠΏΡΡΠ°Π½ΠΈΡΡ Ρ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ
ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² ΠΡΠ΅ΡΠΈΠΊΡΡ ΠΌΠΈΠ½.
ΠΈ ΠΌΠ°ΠΊΡ.
ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ.ΠΡΠ΅ΡΠΈΠΊΡ min
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ , Π±ΠΎΠ»ΡΡΠ΅Π΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎΠ΅ , ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΏΡΠ΅ΡΠΈΠΊΡ max
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ , ΠΌΠ΅Π½ΡΡΠ΅Π΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎΠ΅ . ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² min
ΠΈ max
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠ° Ρ ΠΎΠ±ΡΠΈΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ HTML, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Ρ <
ΠΈ >
.
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»Ρ
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ . Π€ΡΠ½ΠΊΡΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»Ρ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ
ΠΈΠ»ΠΈ ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
.Π Π΅ΠΆΠΈΠΌ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΈΡΠΏΠ»Π΅ΠΉ ΡΠΈΡΠ΅, ΡΠ΅ΠΌ Π²ΡΡΠ΅, Π° ΡΠ΅ΠΆΠΈΠΌ ΠΏΠΎΡΡΡΠ΅Ρ
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΈΡΠΏΠ»Π΅ΠΉ Π²ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΈΡΠ΅. ΠΡΠ° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΈΠ³ΡΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΠΎΠ»Ρ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
. 1
2
@media all and (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) {...}
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ Π½ΠΎΡΠΈΡΠ΅Π»Ρ Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½ Π‘ΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½
ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ / Π²ΡΡΠΎΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΈΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²ΡΠ²ΠΎΠ΄Π°.ΠΡΠ΅ΡΠΈΠΊΡΡ
min
ΠΈ max
Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄Π²ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅Π»ΡΡ ΡΠΈΡΠ΅Π», ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΊΠΎΡΠΎΠΉ ΡΠ΅ΡΡΠΎΠΉ. ΠΠ΅ΡΠ²ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , Π° Π²ΡΠΎΡΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΡΠΎΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
1
2
@media all and (min-device-aspect-ratio: 16/9) {...}
Pixel Ratio Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΡΠ½ΠΊΡΠΈΡΠΌ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ . ΠΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° , Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΠΌΠΈΠ½.
ΠΈ ΠΌΠ°ΠΊΡ.
. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΡΠ½ΠΊΡΠΈΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ² Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΎΡΡΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ Π΄ΠΈΡΠΏΠ»Π΅ΠΈ Retina. ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
1
2
@media only screen ΠΈ (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}
Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅Media Feature
Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π€ΡΠ½ΠΊΡΠΈΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²ΡΠ²ΠΎΠ΄Π° Π² ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΉ ΠΊΠ°ΠΊ ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ ΠΈΠ»ΠΈ DPI . ΠΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΡ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΡ
Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΈΠ½.
ΠΈ ΠΌΠ°ΠΊΡ.
.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΡΠΊΠΈ Π½Π° ΠΏΠΈΠΊΡΠ΅Π»Ρ (
1,3dppx
), ΡΠΎΡΠΊΠΈ Π½Π° ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡ ( 118dpcm,
) ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΄Π»ΠΈΠ½Ρ.
1
2
@media print ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅: 300 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ) {...}
ΠΡΡΠ³ΠΈΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ
ΠΡΡΠ³ΠΈΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ
Π²ΡΡ
ΠΎΠ΄Π½ΡΡ
ΡΠ²Π΅ΡΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠ²Π΅Ρ
, ΠΈΠ½Π΄Π΅ΠΊΡΠ° ΡΠ²Π΅ΡΠ°
ΠΈ ΠΌΠΎΠ½ΠΎΡ
ΡΠΎΠΌΠ½ΡΠΉ
, ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ°ΡΡΡΠΎΠ²ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ΅ΡΠΊΠΈ
ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠ° ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Π»Π΅Π²ΠΈΠ·ΠΎΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°ΡΡ
ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ.ΠΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠ΅Π½Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Ρ, Π½ΠΎ Π² ΡΠ°Π²Π½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ²
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Internet Explorer 8 ΠΈ Π½ΠΈΠΆΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ Π² Π΄ΡΡΠ³ΠΈΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡΡ ΠΏΠ°ΡΠ° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΡ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π»ΠΎΠ², Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΡ Π½Π° Javascript.
Respond.js - ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π», ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ / ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈ ΡΠΈΠΏΡ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ². CSS3-MediaQueries.js - ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·Π²ΠΈΡΡΠΉ ΠΈ ΡΡΠΆΠ΅Π»ΡΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π», ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡΠΈΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΌΠ°ΡΡΠΈΠ²Π° Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ².ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΈΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ Π»ΡΠ±ΠΎΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠ» ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ Π·Π°ΠΌΠ΅Π΄Π»ΡΡΡ ΡΠ°Π±ΠΎΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π» ΡΡΠΎΠΈΡ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡΠ° Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΠΌΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ΅ΠΌ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ°Π½Π΅Π΅. ΠΠ΄Π½Π° ΠΈΠ· ΡΠ΅ΠΊΡΡΠΈΡ
ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π² Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π±ΠΎΠΊΠΎΠ²Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ Π² ββΠΌΠ΅Π½ΡΡΠΈΡ
ΠΎΠΊΠ½Π°Ρ
ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΎΠ±Π°Π²ΠΈΠ² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ Π΄Π»Ρ Π²ΠΈΠ΄ΠΎΠ²ΡΡ
ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ 420,
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΌΠ°ΠΊΠ΅Ρ, ΠΎΡΠΊΠ»ΡΡΠΈΠ² ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠΈΡΠΈΠ½Ρ ΡΠ΅ΠΊΡΠΈΠΈ
ΠΈ Π² ΡΡΠΎΡΠΎΠ½Ρ
.
1
2
3
4
5
6
7
@media all and (max-width: 420px) {
section, aside {
float: Π½Π΅Ρ;
ΡΠΈΡΠΈΠ½Π°: Π°Π²ΡΠΎ;
}
}
Π€ΠΈΠ³.4 ΠΠ΅Π· ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΡΠ΅ΠΊΡΠΈΠΈ
ΠΈ Π² ΡΡΠΎΡΠΎΠ½Ρ
ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΎΠ½ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π», ΡΡΠΎΠ±Ρ Π΄Π°ΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ² ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΡ
ΡΠΈΡΠΈΠ½Ρ, ΡΠ°Π·Π΄Π΅Π»
ΠΈ Π² ΡΡΠΎΡΠΎΠ½Ρ
ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠ³ΡΡ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΠΏΠ΅ΡΠ΅Π΄ΡΡΠΊΡ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²Π°
ΠΠ°Ρ ΠΈΠ½ΡΡΠΈΠ½ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° Π²ΠΎΠΊΡΡΠ³ ΠΎΠ±ΡΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΡΡ
ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 320px
, 480px
, 768px
, 1024px
, 1224px
ΠΈ Ρ. Π. ΠΡΠΎ ΠΏΠ»ΠΎΡ
Π°Ρ ΠΈΠ΄Π΅Ρ.
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊ ΠΌΠ°ΡΡΠΈΠ²Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. Π’ΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²Π²ΠΎΠ΄ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π²Π΅Π±-ΡΠ°ΠΉΡ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π»ΠΎΠΌΠ°ΡΡΡΡ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½Π½ΠΎ ΠΈΠ»ΠΈ Π·Π°ΡΡΡΠ΄Π½ΡΠ΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ°.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²ΡΠ΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΡΡΠΊΠ°ΡΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠΎΠΏΡΡΠΊΠ° Π½Π΅ ΠΎΡΡΡΠ°Π²Π°ΡΡ ΠΎΡ ΡΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΌ ΠΏΡΠΎΡΠ΅ΡΡΠΎΠΌ.
Mobile First
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ½Π°ΡΠ°Π»Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ . ΠΠΎΠ΄Ρ ΠΎΠ΄, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ, Π½Π°ΡΠ΅Π»Π΅Π½Π½ΡΡ Π½Π° ΠΌΠ΅Π½ΡΡΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅, Π»Π΅ΠΆΠ°ΡΠ΅Π΅ Π² ΠΎΡΠ½ΠΎΠ²Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΆΠ΅ ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ.ΠΡΠΎ ΠΏΡΡΡΠ°Ρ ΡΡΠ°ΡΠ° ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ. ΠΡΠΎΠΏΡΡΠΊΠ½Π°Ρ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²Π°ΠΆΠ½Π° Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΌ Π½ΡΠΆΠ΅Π½ Π±ΡΡΡΡΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ.
ΠΠΎΠ΄Ρ ΠΎΠ΄ Β«ΡΠ½Π°ΡΠ°Π»Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅Β» ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ ΡΡΠ΅ΡΠΎΠΌ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΊΠΎΡΠ΅ Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠ»Π°Π½ΠΈΡΡΠΉΡΠ΅ ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°ΠΉΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΠΎΠΏΡΡ.
Π ΡΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ.
1
2
3
4
5
6
/ * Π‘Π½Π°ΡΠ°Π»Π° ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π·Π°ΡΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ * /
@media screen ΠΈ (min-width: 400px) {...}
@media screen ΠΈ (min-width: 600px) {...}
@media screen ΠΈ (min-width: 1000 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {...}
@media screen ΠΈ (min-width: 1400px) {...}
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π·Π°Π³ΡΡΠ·ΠΊΡ Π½Π΅Π½ΡΠΆΠ½ΡΡ ΠΌΠ΅Π΄ΠΈΠ°ΡΠ΅ΡΡΡΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ². ΠΠΎΠΎΠ±ΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΠΈΠ·Π±Π΅Π³Π°ΡΡ CSS3-ΡΠ΅Π½Π΅ΠΉ, Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ², ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΠΈΠ»ΡΡ - ΡΠΎΠΆΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ Π°Ρ ΠΈΠ΄Π΅Ρ. ΠΡΠΈ ΡΡΠ΅Π·ΠΌΠ΅ΡΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ½ΠΈ Π²ΡΠ·ΡΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ ΠΈ ΠΌΠΎΠ³ΡΡ Π΄Π°ΠΆΠ΅ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ ΡΡΠΎΠΊ ΡΠ»ΡΠΆΠ±Ρ Π±Π°ΡΠ°ΡΠ΅ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
1
2
3
4
5
6
7
8
9
10
11
/ * ΠΠΎΡΠΈΡΠ΅Π»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ * /
ΡΠ΅Π»ΠΎ {
ΡΠΎΠ½: #ddd;
}
/ * ΠΠ΅Π΄ΠΈΠ° Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ² * /
@media screen ΠΈ (min-width: 800px) {
ΡΠ΅Π»ΠΎ {
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: url ("bg.png") 50% 50% Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
}
}
ΠΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ ΠΏΠ΅ΡΠ²Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠΎΠ±Π°Π²Π»ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π»ΡΡΡΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π½Π° Π²ΠΈΠ΄ΠΎΠ²ΡΡ
ΡΠΊΡΠ°Π½Π°Ρ
ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ 420
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.ΠΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π² ΡΡΠΎΡ ΠΊΠΎΠ΄, ΡΡΠΎΠ±Ρ ΡΠ½Π°ΡΠ°Π»Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π»Ρ Π²ΠΈΠ΄ΠΎΠ²ΡΡ
ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠΈΡΠΈΠ½ΠΎΠΉ Π±ΠΎΠ»Π΅Π΅ 420
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΌΡ ΠΏΠΎΡΡΡΠΎΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ΡΠ΅ΠΊΡΠΈΡ,
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
ΠΌΠ°ΡΠΆΠ°: 1.858736059%;
}
@media all and (min-width: 420px) {
.container {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 538 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΡΠ°Π·Π΄Π΅Π» {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΡΠΈΡΠΈΠ½Π°: 63.197026%;
}
Π² ΡΡΠΎΡΠΎΠ½Π΅ {
float: right;
ΡΠΈΡΠΈΠ½Π°: 29.3680297%;
}
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΎ ΠΆΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ΄Π°, ΡΡΠΎ ΠΈ ΡΠ°Π½ΡΡΠ΅. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈ ΠΎΠ΄Π½ΠΎ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ CSS . ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ, Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΠΎΠΊΠ½Π°Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π±Π΅Π· ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
Π Π½Π°ΡΠΈ Π΄Π½ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ
ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΠ½ΠΎΠ³Π΄Π° ΠΈΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΠΎΠΌΠΎΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΎ, Apple ΠΈΠ·ΠΎΠ±ΡΠ΅Π»Π° ΠΌΠ΅ΡΠ°ΡΠ΅Π³ viewport
.
Π₯ΠΎΡΡ Π² ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π΅ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π½Π΅ Π·Π½Π°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΡΠ°Π± Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠ΅ΡΡΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
ΠΡΡΠΎΡΠ° Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°
ΠΈ Π¨ΠΈΡΠΈΠ½Π° ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅ΡΠ°ΡΠ΅Π³Π° viewport
ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ height
ΠΈΠ»ΠΈ width
Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²ΡΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, Π»ΠΈΠ±ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ. ΠΠ»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° height
ΠΏΡΠΈΠ½ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ device-height
, Π° Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° width
ΠΏΡΠΈΠ½ΡΡΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ device-width
. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΡ
ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² ΡΠ½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π°ΠΈΠ»ΡΡΡΠΈΡ
ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΈ Π½Π°ΠΈΠ»ΡΡΡΠ΅Π³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
.
1
2
Π€ΠΈΠ³.4 ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΈΡΠΈΠ½Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
ΠΠ°ΡΡΡΠ°Π± Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°
Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, ΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ
, Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ
, Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ
ΠΈ , ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ
.
ΠΠ°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΌΠ°ΡΡΡΠ°Π± Π²Π΅Π±-ΡΠ°ΠΉΡΠ°
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π½Π°
1
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π²ΡΡΠΎΡΠΎΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π°
Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Π»ΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ ΠΎΡ 0
Π΄ΠΎ 10
.
1
2
Π ΠΈΡ.4 ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π»ΠΎΠ³ΠΎ ΡΠΈΡΠ»Π° Π²ΡΡΠ΅ 1
ΡΠ²Π΅Π»ΠΈΡΠΈΡ ΠΌΠ°ΡΡΡΠ°Π± Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π΄ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°Π²Π½ΡΠΌ 1
.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π°
ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π°
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Π»ΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ, ΠΌΠ΅Π½ΡΡΠΈΠΌ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ . ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ ΠΆΠ΅ ΡΠ°ΡΡΡΠΆΠ΄Π΅Π½ΠΈΡ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Π»ΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ, Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΡΠΌ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±Π° .ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ
ΠΈΠ· Π½ΠΈΡ
ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ
0
Π΄ΠΎ 10
.
1
2
ΠΠΎΠΎΠ±ΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π½Π° ΡΠΎ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΈ ΠΈΡΡ
ΠΎΠ΄Π½Π°Ρ ΡΠΊΠ°Π»Π°
. ΠΡΠΎ ΠΎΡΠΊΠ»ΡΡΠΈΡ Π»ΡΠ±ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ .Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π΄Π»Ρ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
Π½Π° Π±Π΅Π·
ΠΎΡΠΊΠ»ΡΡΠΈΡ Π»ΡΠ±ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π½Π°
Π΄Π°
Π²ΠΊΠ»ΡΡΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° - ΠΏΠ»ΠΎΡ Π°Ρ ΠΈΠ΄Π΅Ρ . ΠΡΠΎ Π²ΡΠ΅Π΄ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π»ΡΠ΄ΡΠΌ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΆΠ΅Π»Π°Π½ΠΈΡ.
1
2
Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ΅ΡΠ°ΡΡ, ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π»ΡΠ±ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ.ΠΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π½Π°Π΄ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ target-densitydpi
. ΠΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° target-densitydpi
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ°Ρ device-dpi
, high-dpi
, medium-dpi
, low-dpi
ΠΈΠ»ΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ target-densitydpi ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΡΠ΅Π΄ΠΊΠΎ, Π½ΠΎ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅.
1
2
ΠΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΠΠ΅ΡΠ°-ΡΠ΅Π³ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΡ
Π·Π°ΠΏΡΡΠΎΠΉ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠ° content
. ΠΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ² width
ΠΈ Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ
.
1
2
Π€ΠΈΠ³.4 ΠΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ width = device-width
ΠΈ initial-scale = 1
ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΠΌΡΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±.
ΠΡΠ°Π²ΠΈΠ»ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° CSS
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΡΠ°ΠΊ ΡΠΈΠ»ΡΠ½ΠΎ Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π±ΡΠ»ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ· ΠΌΠ΅ΡΠ°ΡΠ΅Π³Π° Ρ HTML Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @
Π² CSS. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΎΡΠ΄Π΅Π»ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΡΠΆΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @viewport
, ΠΎΠ΄Π½Π°ΠΊΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΏΠΎ Π²ΡΠ΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌ Π½Π΅Π²Π΅Π»ΠΈΠΊΠ°.Π Π°Π½Π΅Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½ΡΠΉ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ viewport
Π²ΡΠ³Π»ΡΠ΄Π΅Π» Π±Ρ ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @viewport
Π² CSS.
1
2
3
4
5
@viewport {
ΡΠΈΡΠΈΠ½Π°: ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°;
ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: 1;
}
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ, Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΉ Π°ΡΠΏΠ΅ΠΊΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° - ΡΡΠΎ Π³ΠΈΠ±ΠΊΠΈΠ΅ Π½ΠΎΡΠΈΡΠ΅Π»ΠΈ. ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΠΈΠ΄ΠΎΠ²ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΌΠ΅Π΄ΠΈΠ° Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΈΠΏΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠΌΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π±ΡΡΡΡΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ Π½ΠΎΡΠΈΡΠ΅Π»Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠΌ - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width
ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 100%
. ΠΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π»ΡΠ±ΠΎΠΉ Π½ΠΎΡΠΈΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠ²ΠΎΠΈΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ².
1
2
3
4
img, video, canvas {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%;
}
ΠΠΈΠ±ΠΊΠΈΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π½ΠΎΡΠΈΡΠ΅Π»ΠΈ
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width
Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΄Π»Ρ iframe
s ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°.ΠΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ
ΠΎΠ΄ΠΈΡ Π΄ΠΎ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ YouTube, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠ΅ΠΉΠΌΡ Π΄Π»Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°, ΡΡΠΎ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²Π°Π½ΠΈΠ΅. Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ ΠΎΠ±Ρ
ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡΡΡ.
Π§ΡΠΎΠ±Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π±ΡΠ»ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ
100%
, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΌΠΎΠ³ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π ΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π²ΡΡΠΎΡΡ
0
Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌΠ° hasLayout
Π² Internet Explorer.
Padding Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΡΡΠΎΡΠΎΠ½ Π²ΠΈΠ΄Π΅ΠΎ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΡΠΎΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π΅. ΠΠΎΠΌΠ½ΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΡΡ ΡΠΎΡΠΌΡΠ»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°? ΠΡΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ 16: 9, 9
, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π½Π° 16
, Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΠΎ .5625
, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ½ΠΈΠ·Ρ 56,25%
. ΠΡΡΡΡΠΏΡ ΡΠ½ΠΈΠ·Ρ, Π° Π½Π΅ ΡΠ²Π΅ΡΡ
Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ Internet Explorer 5.5 ΠΎΡ ΡΠ°Π·ΡΡΡΠ΅Π½ΠΈΡ ΠΈ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
HTML
1
2
3
4
<ΡΠΈΡΡΠ½ΠΎΠΊ>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ΡΠΈΡΡΠ½ΠΎΠΊ {
Π²ΡΡΠΎΡΠ°: 0;
ΠΎΠ±ΠΈΠ²ΠΊΠ°-Π΄Π½ΠΎ: 56.25%; / * 16: 9 * /
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 100%;
}
iframe {
Π²ΡΡΠΎΡΠ°: 100%;
ΡΠ»Π΅Π²Π°: 0;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΈΡΠΈΠ½Π°: 100%;
}
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π³ΠΈΠ±ΠΊΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ
ΠΠΎ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΠΈ CodePen Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ iframe
Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
ΠΊΠΎΠ΄Π°, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π½Π° ΠΈΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 100%
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 75%
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 50%
Π Π΅ΡΡΡΡΡ
ΠΈ Π‘ΡΡΠ»ΠΊΠΈΠ£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ - ΠΠ·ΡΡΠΈΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π° 5 ΠΌΠΈΠ½ΡΡ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Π½Π°ΡΡΡ Π²Π°Ρ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π° ΠΏΡΡΡ ΠΌΠΈΠ½ΡΡ.ΠΡΠΎΠ³ΠΎ ΡΠ²Π½ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΎΠ½ Π΄Π°ΡΡ Π²Π°ΠΌ ΠΎΠ±Π·ΠΎΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π»ΠΈΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ CSS
- ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ
- Flexbox
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π³Π»ΡΠ±ΠΆΠ΅ ΠΏΠΎΠ³ΡΡΠ·ΠΈΡΡΡΡ Π² ΡΠ΅ΠΌΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Π½Π°Ρ ΡΡΠ΅Π±Π½ΡΠΉ ΠΊΡΡΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π° Scrimba, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π½Π° ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.
Π ΠΏΠΎΠΊΠ° Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΎΡΠ½ΠΎΠ²!
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS
Π ΠΎΡΠ½ΠΎΠ²Π΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π»Π΅ΠΆΠ°Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS.ΠΡΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ²ΠΎΡ ΡΠ΅Π½Π½ΠΎΡΡΡ ΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΠ΅Π½Π½ΠΎΡΡΠΈ. ΠΡΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ:
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ %
, Π° Π·Π°ΡΠ΅ΠΌ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΅Π΄ΠΈΠ½ΠΈΡΡ rem
.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ³ΠΎ HTML-ΠΊΠΎΠ΄ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π½Π° ΠΌΠΎΠΉ ΡΠ°ΠΉΡ
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΠΈΠ· GIF Π½ΠΈΠΆΠ΅, Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ:
ΠΡΠΎ Π½Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Π΅Π³ΠΎ Π½Π° 70 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ². ΠΡ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
.myImg {
ΡΠΈΡΠΈΠ½Π°: 70%;
}
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° 70 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ΅Π³Π°
. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ΅Π³
Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ 70 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°.
ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Π Π²ΠΎΡ Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅!
ΠΠ΄Π½Π°ΠΊΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΎΠ΄Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π½Π°ΡΠΈΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ: ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½Π½ΠΎ Π½Π° ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
. Π¨ΠΈΡΠΈΠ½Π° 70% ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΡΡΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΌΠΈ:
Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π»ΡΡΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ - ΠΈΠ΄Π΅Π°Π»ΡΠ½Π°Ρ Π·Π°Π΄Π°ΡΠ° Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ². ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΊΠ°Π·Π°ΡΡ , Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΠ»Ρ.
ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ Π² CSS:
@media (max-width: 768px) {
.myImage {
ΡΠΈΡΠΈΠ½Π°: 100%
}
}
ΠΡΠΎΡ Π±Π»ΠΎΠΊ CSS Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΅ΡΡΡ ΡΠΎΡΠΊΠ° ΠΎΡΡΠ°Π½ΠΎΠ²Π°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΡΠ΅. ΠΡΠΎ ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ 70%
ΠΈ 100%
.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Flexbox Π΄Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ°Π»Π΅Π΅ ΠΈΠ΄Π΅Ρ Flexbox. ΠΡ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΎ Π±ΡΡΡΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ, Π½Π΅ ΠΈΠ·ΡΡΠΈΠ² Flexbox. ΠΠ½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» ΠΈΠ³ΡΡ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡΠ»Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ββΠ½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½Π° Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ.
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Flexbox, ΠΌΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠ»ΠΎΠΆΠ½ΠΈΠΌ Π½Π°Ρ ΡΠ°ΠΉΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π°Π΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. ΠΠΎΡ HTML Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ:
ΠΠ° Π³Π»Π°Π²Π½ΡΡ
ΠΠ±ΠΎ ΠΌΠ½Π΅
Π‘Π²ΡΠ·Π°ΡΡΡΡ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ.
ΠΡΠ΅ Π½Π°ΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π²ΡΠΈΡΠ½ΡΡΡ Π² Π»Π΅Π²ΡΡ ΡΠ°ΡΡΡ, Π° ΡΡΠΎ Π½Π΅ ΡΠΎ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ. ΠΡ Ρ
ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΏΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² Π³ΠΈΠ±ΠΊΠΈΠΉ Π±ΠΎΠΊΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ justify-content
.
nav {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ;
justify-content: ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π²ΠΎΠΊΡΡΠ³;
}
display: flex
ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅Ρ
Π² Π³ΠΈΠ±ΠΊΠΈΠΉ Π±Π»ΠΎΠΊ, Π° justify-content: space-around
ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½ΡΡΡΠΈ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅Π±Ρ.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π²ΠΎΠΊΡΡΠ³ ΡΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ. Π, ΠΊΠ°ΠΊ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΠΎΠ½ Ρ ΠΎΡΠΎΡΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ:
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°: rem
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ°Π³ - ΡΠ΄Π΅Π»Π°ΡΡ Π½Π°ΡΡ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ. ΠΠΈΠ΄ΠΈΡΠ΅ Π»ΠΈ, Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅Π½ΡΡΠΈΠ»ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° ΠΌΠ΅Π½ΡΡΠ΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (Π½Π°ΡΠ° ΡΠΎΡΠΊΠ° ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅?).
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ - ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
@media (max-width: 768px) {
nav {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 14 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
h2 {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 28 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
}
ΠΠΎ ΡΡΠΎ Π½Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ.Π£ Π½Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (h3, h4, Π°Π±Π·Π°ΡΡ ΠΈ Ρ. Π.). Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΎΡΠΊΠ°Ρ ΠΎΡΡΠ°Π½ΠΎΠ²Π°. ΠΡΠ΄Π΅Ρ Π±Π°ΡΠ΄Π°ΠΊ!
ΠΠ΄Π½Π°ΠΊΠΎ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΎΡΠΊΠ°Ρ
ΠΎΡΡΠ°Π½ΠΎΠ²Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, h2
Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ
.
Π’Π°ΠΊ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π±Ρ Ρ ΠΌΠΎΠ³ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΡΡΡΠΈΡΠΈΠ΅Π½Ρ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΡΡΡΠΈΡΠΈΠ΅Π½ΡΠ°?
ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΌΡ!
rem
Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΡΠΎ: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.ΠΡΠ°Π²ΠΈΡΡΡ ΡΡΠΎ:
html {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 14 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠ°ΠΊ, Π² ΡΡΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΎΠ΄ΠΈΠ½ rem
ΡΠ°Π²Π΅Π½ 14px.
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠΎΠ² Π½Π° Π½Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ
rem
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
h2 {
font-size: 2rem;
}
nav {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 1 Π±ΡΡ;
}
Π Π·Π°ΡΠ΅ΠΌ ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ font-size Π΄Π»Ρ ΡΠ΅Π³Π°
Π²Π½ΡΡΡΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°. ΠΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ Π½Π°ΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² h2
ΠΈ nav
ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ.
ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠ΅Π½ΡΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ rem
Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ΅:
@media (max-width: 768px) {
html {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 14 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
}
}
Π ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΡΠΊΠ° ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π΄Π»Ρ Π²ΡΠ΅Ρ Π½Π°ΡΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΡΠΈΡΡΠ°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΎΡΠΌΠ΅ΡΠΊΡ Π² 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
ΠΡΠΎΡΠ»ΠΎ Π²ΡΠ΅Π³ΠΎ ΠΏΡΡΡ ΠΌΠΈΠ½ΡΡ, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΡΠΈΠ»ΠΈΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ°. ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ, ΠΈ Π²Ρ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠ²ΠΎΠΈ ΠΏΠ΅ΡΠ²ΡΠ΅ ΡΠ°Π³ΠΈ ΠΊ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ΅Π½Ρ ΡΠ΅Π½Π½ΡΡ Π½Π°Π²ΡΠΊΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Ρ Π² ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΈ, Ρ Π±Ρ ΠΏΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π²Π°ΠΌ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° Π½Π°Ρ ΠΎΠ±ΡΠΈΡΠ½ΡΠΉ ΠΊΡΡΡ Scrimba ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅! ΠΠ³ΠΎ ΠΏΡΠ΅ΠΏΠΎΠ΄Π°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°ΡΠ΅Π»Π΅ΠΉ YouTube ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΡ, ΠΈ ΠΎΠ½ Π²ΡΠ²Π΅Π΄Π΅Ρ Π²Π°Ρ Π½Π° ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
Π£Π΄Π°ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ π
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΡΡΠ΅Π½ΠΈΠ΅! ΠΠ΅Π½Ρ Π·ΠΎΠ²ΡΡ ΠΠ΅Ρ ΠΠΎΡΠ³Π΅Π½, Ρ ΡΠΎΡΡΡΠ΅Π΄ΠΈΡΠ΅Π»Ρ Scrimba - ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π½Π°ΡΡΠΈΡΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Π½Π°Ρ ΡΡΠ΅Π±Π½ΡΠΉ ΠΊΡΡΡ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π°ΡΡΠΈΡΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Π½Π° ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π΄Π΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΠΊΡΡΡ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΊΠ²Π°Π»ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.11 ΡΠ±Π΅Π΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΡΠ΅ Π² 2010 Π³ΠΎΠ΄Ρ ΠΡΠ°Π½ ΠΠ°ΡΠΊΠΎΡΡ ΠΏΡΠΈΠ·Π²Π°Π» Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠ²Π°ΡΡ Β«Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Β» (RWD):
Β«ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΡΠΏΠΎΡΠ°Π±Π»ΠΈΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΠ°ΡΡΡΡΠ΅Π³ΠΎ ΡΠΈΡΠ»Π° Π²Π΅Π±-ΡΡΡΡΠΎΠΉΡΡΠ², ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΡ ΠΊΠ°ΠΊ Π°ΡΠΏΠ΅ΠΊΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΎΠΏΡΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ [ΡΠ΄Π΅Π»Π°ΡΡ Π½Π°ΡΠΈ] Π΄ΠΈΠ·Π°ΠΉΠ½Ρ [β¦] Π±ΠΎΠ»Π΅Π΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ ΠΊ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌ ΠΌΠ°ΡΡΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡ Β».
ΠΠ½ ΡΡΠ²Π΅ΡΠΆΠ΄Π°Π», ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ.
ΠΠΎ ΡΠ΅ΠΌΠ΅: 9 ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠΌΠ½ΡΡ , ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΡ 404 ΡΡΡΠ°Π½ΠΈΡ
ΠΠΎΡΠ΅ΠΌΡ Π»Π΅Ρ ΡΠΏΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΡΡΠΈΠ³ ΠΊΡΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΌΠ°ΡΡΡ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ, Π½ΠΎ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ Π΅ΡΠ΅ Π½Π΅ Π²ΡΠΏΡΡΠ΅Π½Ρ.
ΠΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½? Π ΠΊΠ°ΠΊΠΎΠ²Ρ Π»ΡΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅?
Β«ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ 56,74% Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.β
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ?
Π‘ΡΡΠΎΠ³ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Π΅ΡΡΡ ΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ:
Β«ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π½Π°ΡΠ΅Π»ΠΈΠ²Π°ΡΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π½ΠΎ ΠΈ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π²ΡΠΏΠΎΠ»Π½ΡΡΡΠ΅Π³ΠΎ Π½Π°ΡΡ ΡΠ°Π±ΠΎΡΡΒ», - ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΠΠ°ΡΠΊΠΎΡΡ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΎ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²Π° Π² HTML / CSS, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠΎΠ³Π΄Π° Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΡΡΠΎΠ»Π±ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠ΅Π½ΡΡΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π° ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° 21-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠΌ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅, 13-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠΌ Π½ΠΎΡΡΠ±ΡΠΊΠ΅, 9,7-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠΌ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅ ΠΈΠ»ΠΈ 5,5-Π΄ΡΠΉΠΌΠΎΠ²ΡΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½.
Β«ΠΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ [β¦.] ΠΠ°Π΄Π΅ΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π½Π°ΡΠΈΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ Π² ΡΡΠΊΠΈ Π½Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΈΡ ΠΏΡΠΈΠ²ΡΡΠ΅ΠΊ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°Β», - ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΠΠ°ΡΠΊΠΎΡΡ.
ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ Π²ΡΠ΅ΠΌΡ ΠΈ Π΄Π΅Π½ΡΠ³ΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ ΠΎΠ΄Π½Ρ Π²Π΅ΡΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π²ΠΌΠ΅ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ .
ΠΠ°ΡΠΊΠΎΡΡ Π·Π΄Π΅ΡΡ Π³ΠΎΠ²ΠΎΡΠΈΡ ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΏΡΠ΅Π²ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠΊΠΎΠ½ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΎ Π΅Π³ΠΎ ΡΠ»ΠΎΠ²Π°ΠΌ, Β«Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΒ», ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ.
Π£ΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ 8,48 ΠΌΠ»ΡΠ΄ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΡΡΠ° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π΅ΠΏΠΎΠ΄Π²Π»Π°ΡΡΠ½ΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, ΡΠΏΠΎΡΠΎΠ±Π½ΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠΎΡΠΌΡ.
ΠΠΌΠ΅ΡΡΠ΅ ΡΡΠΈ ΡΡΠΈ ΡΠΈΠΏΠ° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ.
Π‘Π²ΡΠ·Π°Π½ΠΎ: Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅ΡΠΎΠΊ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ²
ΠΠΎ, ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΠΠ°ΡΠΊΠΎΡΡ, ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π»ΠΎ:
Β«ΠΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ, Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ - ΡΡΠΎ ΡΡΠΈ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½ΠΎ ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ΅Π±ΡΡΡ ΠΈΠ½ΠΎΠ³ΠΎ ΠΌΡΡΠ»Π΅Π½ΠΈΡ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΠΊΠ°ΡΠ°Π½ΡΠΈΠ½ Π² ΡΠ°Π·ΡΠΎΠ·Π½Π΅Π½Π½ΡΠ΅, Π·Π°Π²ΠΈΡΡΡΠΈΠ΅ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.β
ΠΠΈΠΆΠ΅ ΠΌΡ ΠΏΡΠΈΠ²Π΅Π»ΠΈ 11 ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡ ΠΎΠ΄ΡΡ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΊΡΠΈΡΠ΅ΡΠΈΠ΅Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ°ΠΆΠ΄ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠΈΠΌΠ΅ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
Dropbox ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΏΡΠ°Π²ΠΈΠ»ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΈ ΠΈ Π³ΠΈΠ±ΠΊΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ΄Π°ΡΡΠ΅Π³ΠΎΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° Π½Π° ΠΊΠ°ΡΠΌΠ°Π½Π½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ°, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ²Π΅ΡΡ ΡΠΎΠ½Π°, Π½ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ.
Π‘ ΡΡΠ΅ΡΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Dropbox ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΏΠΎΠ΄ΠΏΡΡΠ³ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΡΡΠ΅Π»ΠΊΠ° ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π½ΠΈΠ·, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. Π’Π°ΠΊΠ°Ρ ΠΆΠ΅ ΡΡΡΠ΅Π»ΠΊΠ° ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ Π½Π° ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΈΡ ΡΠΎΡΠΌΠ° ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ Π²ΠΈΠ΄Π½Π° Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π½ΠΎ ΡΠΊΡΡΡΠ° Π·Π° ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π³Π΄Π΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΎ.
ΠΠ΅Π±-ΡΠ°ΠΉΡDribbble ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΎΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠΈΠ·Π½Π°ΠΊΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°: Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠΊΡΠ°ΡΠ°Π΅ΡΡΡ Ρ ΠΏΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ ΠΈ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ Π΄ΠΎ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ .
Π§ΡΠΎΠ±Ρ ΠΈΡ ΡΠ°ΠΉΡ Π½Π΅ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π°Π»ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Dribbble ΡΠ΄Π°Π»ΠΈΠ»Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ½ΠΈΠΌΠΊΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΡΠΈΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ, Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠ², ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΈ Π»Π°ΠΉΠΊΠΎΠ² Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΡΡΠ»ΠΈ ΠΌΠ΅Π½Ρ Π·Π° Π·Π½Π°ΡΠΊΠΎΠΌ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° ΠΈ ΡΠ±ΡΠ°Π»ΠΈ ΡΡΡΠΎΠΊΡ ΠΏΠΎΠΈΡΠΊΠ°.
ΠΠ΅Π±-ΡΠ°ΠΉΡGitHub ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΡ ΡΠ°Π±ΠΎΡΡ Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠ΄Π½Π°ΠΊΠΎ Π±ΡΠ»ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΡΡ ΠΎΡΠ»ΠΈΡΠΈΠΉ:
- ΠΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π½Π°Π΄ ΡΠ³ΠΈΠ±ΠΎΠΌ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΡΠΎΠ»Π±ΡΠΎΠΌ, ΠΏΡΠΈΡΠ΅ΠΌ ΠΊΠΎΠΏΠΈΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ ΡΠΎΡΠΌΠΎΠΉ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ, Π° Π½Π΅ ΡΡΠ΄ΠΎΠΌ Ρ Π½Π΅ΠΉ.
- Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π³Π΄Π΅ ΡΠΎΡΠΌΠ° ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ΅Π½ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ, GitHub ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΏΡΠΈΠ·ΡΠ² ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΡΠΎΡΠΌΡ.
- ΠΠ°ΠΊ ΠΈ Dribbble, GitHub ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄Π°Π»ΠΈΠ» ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΡΠΏΡΡΡΠ°Π» ΠΌΠ΅Π½Ρ Π·Π° Π·Π½Π°ΡΠΊΠΎΠΌ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Π½Π° ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π±Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π³Π΄Π΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΎ.
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠ΄ΠΈΠ²Π»Π΅Π½ΠΈΠ΅ Π±ΡΡΡΡΠΎ, Π·Π° ΡΠ΅ΡΡΡΠ΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ 3G. Π§ΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Klientboost ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π½ΠΎ ΠΈΠΌ ΡΠ΄Π°Π»ΠΎΡΡ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ.
Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Β«ΠΠΎΠ»ΡΡΠΈΡΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β» ΠΈ Β«ΠΡ Π½Π°Π½ΠΈΠΌΠ°Π΅ΠΌ!Β» Π²ΡΠ½ΠΎΡΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΈ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ², ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΠΌΠ΅Π½Ρ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ, ΠΏΠΎΡΠ΅ΡΠ°ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π·Π½Π°ΡΠΎΠΊ Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ ΠΈ Π²ΡΠ½ΠΎΡΠΊΠ°, Π° ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΏΠΎΡΠ΅ΡΠ°Π΅Ρ ΠΈΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ², - Π·Π½Π°ΡΠΎΠΊ ΠΌΠ΅Π½Ρ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
ΠΠΎΠΌΠΏΠ°Π½ΠΈΡMagic Leap ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π»Π° ΠΏΡΠΎΡΡΠΎΠΉ, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΆΠΈΠ²Π»ΡΠ΅Ρ ΠΈΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ.Π£ΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ 56,74% Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, ΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ».
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡMagic Leap Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·Π΅Π½ Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π·Π° ΠΎΠ΄Π½ΠΈΠΌ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ: ΠΌΠΈΠΊΡΠΎΠΊΠΎΠΏΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ , Π½ΠΎ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Π° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π³Π΄Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅Π½Π½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
ΠΠ°ΠΆΠ΅ ΠΏΡΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΊ ΡΠ΅ΡΠΈ 3G ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π·Π° ΡΠ΅ΠΌΡ ΡΠ΅ΠΊΡΠ½Π΄, ΡΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ΅ ΡΡΠ΅Π΄Π½Π΅ΠΌΠΈΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ (22 ΡΠ΅ΠΊΡΠ½Π΄Ρ).ΠΠ»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΏΠ»ΠΎΡ ΠΎ.
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡShopify ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ² Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . Π’ΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΌΠΈ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ.
ΠΠ° ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈΠ·ΡΠ²Π° ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ. ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΡΡΠΎ Π½ΠΈΠΆΠ΅.
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΊΠΎΠΏΠΈΠΈ Π½Π° ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ , ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΏΠΎΠ΄ ΠΊΠΎΠΏΠΈΠ΅ΠΉ.
ΠΠ°ΠΊ ΠΈ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΠΌΠ΅Π½Ρ Shopify ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅Π½Π΅Π½ΠΎ Π·Π½Π°ΡΠΊΠΎΠΌ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Π½Π° ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ²ΠΎΠΈΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ², ΠΈΠΌ ΡΠ΄Π°Π»ΠΎΡΡ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π½ΠΈΠΆΠ΅ ΠΏΡΡΠΈ ΡΠ΅ΠΊΡΠ½Π΄, ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ΅.
Smashing Magazine Π΄Π΅Π»Π°Π΅Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΡΡΡΠΎΠΉΡΡΠ²Ρ. ΠΡ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π½Π°ΠΊ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅ΡΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΡΠΎΠ»Π±ΡΠΎΠΌ ΠΈ ΡΠΆΠ°ΡΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π±ΡΠΊΠ²Π΅Π½Π½ΡΠΌ Π·Π½Π°ΠΊΠΎΠΌ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
Π‘Π°ΠΉΡSmashing Magazine ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠΊΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈΠ½ΠΊΠ»ΡΠ·ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ΅Π½Ρ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠ°ΠΊ ΡΡΠ»ΡΠΊΠΈ, ΡΠ°ΠΊ ΠΈ Π·Π½Π°ΡΠΊΠΈ. Π ΠΌΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ, ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠΊΠ° ΠΌΠ΅Π½Ρ ΠΎΠ½ΠΈ Π²ΡΠ±ΡΠ°Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΠΎ ΡΠ»ΠΎΠ²ΠΎΠΌ Β«ΠΌΠ΅Π½ΡΒ» ΠΈ Π·Π½Π°ΡΠΊΠΎΠΌ ΠΏΠΎΠΈΡΠΊΠ°. Π£ ΡΠΈΡΡΠΎΠ²ΡΡ Π°Π±ΠΎΡΠΈΠ³Π΅Π½ΠΎΠ² Π½Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ ΠΏΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌ Ρ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π½ΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΡ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ Π·Π½Π°ΡΠΊΠΈ-Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΡ.
ΠΡ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π²ΡΠ΅Π³ΠΎ Π·Π° 2 ΡΠ΅ΠΊΡΠ½Π΄Ρ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ 3G-ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ, ΡΡΠΎ, ΠΏΠΎ ΡΠ»ΠΎΠ²Π°ΠΌ GSMA, Π±ΡΠ΄Π΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ 70% ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΉ Π΄ΠΎ 2020 Π³ΠΎΠ΄Π°.ΠΡΠΎ ΡΠ½ΠΈΠΆΠ°Π΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΎΡΠΊΠ°Π·ΠΎΠ² ΠΈ Π½Π΅ Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠ°ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ.
ΠΡΠ΅Π½Π΄Slack ΠΈΠ·Π²Π΅ΡΡΠ΅Π½ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠ΅Π»ΠΎΠ²Π΅ΡΠ½ΠΎΡΡΡΡ. ΠΠ΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ.
ΠΡ Π³ΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ° Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΊ Π²ΠΈΠ΄ΠΎΠ²ΡΠΌ ΡΠΊΡΠ°Π½Π°ΠΌ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΡΠΎΡΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΈ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², Π° Π½Π° ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ - Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°.
ΠΠΎ ΡΠ΅ΠΌΠ΅: ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ 25 Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΡΠΌΠ°ΠΉΠ»ΠΈΠΊΠΎΠ² Slack, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΡΠ° ΠΊΠΎΠΌΠ°Π½Π΄Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π΅ Π·Π½Π°Π»Π°, ΡΡΠΎ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ
ΠΠ΅Π±-ΡΠ°ΠΉΡSlack ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΎΡ Π²Π°ΡΡΠ²Π°ΡΡ Π²Π΅ΡΡ ΡΡΠΎΠ»Π±Π΅Ρ Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ , ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π΅ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ Π½Π° Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΡ Β«ΠΠΎΠΉΡΠΈΒ» Π½ΠΈΠΆΠ΅.
Treehouse ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΡ Π½Π° Π²ΡΠ΅Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ . ΠΡ ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ - Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ ΠΈ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΌΠ΅Π½Ρ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ ΠΏΡΠ½ΠΊΡΠΎΠ², ΠΏΠ»Π°Π½ΡΠ΅ΡΡ - ΠΌΠ΅Π½Ρ ΠΈΠ· Π΄Π²ΡΡ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΈ Π·Π½Π°ΡΠΎΠΊ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ°, Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΈ Π·Π½Π°ΡΠΎΠΊ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ°.
ΠΡ ΠΏΠΎΠ»Ρ ΡΠΎΡΠΌΡ ΠΏΡΠ΅ΡΠ΅ΡΠΏΠ΅Π²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.ΠΠ½ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π΄Π²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΈ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ Π΄Π»Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ².
ΠΠ°ΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, WillowTree Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΈ ΡΠΆΠ°ΡΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠΎ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ , ΠΎΠ½ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ»ΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΎΠΏΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΠΏΡΠΈΠ·ΡΠ² ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΄ΠΎΠ±ΡΡΠ²Π°.
ΠΠ°ΠΊ ΠΈ Π½Π° Π΄ΡΡΠ³ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ , ΡΠ΅ΡΠΊΠ°, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠ² ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ², ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ Π³ΠΈΠ±ΠΊΠ°Ρ. ΠΠ½ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΏΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ Π΄ΠΎ ΡΠ΅ΡΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠ΄ΠΎ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ .
ΠΠ°ΠΊ ΠΈ Π² Treehouse, ΠΎΠ±Π»Π°ΡΡΡ Π½Π°Π΄ ΡΠ³ΠΈΠ±ΠΎΠΌ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅ΡΡΡ ΠΈΠ· Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅ Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΈΠ·-ΡΡΠ΄ΠΎΠΌ Ρ ΠΊΠΎΠΏΠΈΠ΅ΠΉ ΠΏΠΎΠ΄ Π½Π΅ΠΉ.
ΠΠ΅Π±-ΡΠ°ΠΉΡWIRED ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅ΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ»Π±Π΅Ρ Π½Π° ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈΡ ΠΌΠ΅Π½Ρ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, Π·Π½Π°ΡΠΎΠΊ ΠΌΠ΅Π½Ρ ΠΈ ΡΡΡΠ»ΠΊΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ. Π§ΡΠΎΠ±Ρ ΡΠΏΡΠΎΡΡΠΈΡΡ Π·Π°Π΄Π°ΡΡ, Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΈΠ»ΡΡΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΠΎΡΡΠ½ΡΡ Π»Π΅Π½ΡΡ WIRED ΠΏΠΎ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌ.
ΠΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² WIRED - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ±ΡΠ΅Π·ΠΊΠ° ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ . ΠΠ° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ ΠΈ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠΌΠΈ ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΌΠΈ, ΡΡΠΎ Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΈΡ Π³Π»Π°Π·Π°ΠΌΠΈ.Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½Π° ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½ 16: 9.
ΠΠ°ΠΊΠΎΠΉ Π²Π°Ρ Π»ΡΠ±ΠΈΠΌΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ?
Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ, ΠΈ ΠΌΡ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²ΠΊΠ»ΡΡΠΈΠΌ ΡΡΠΎ Π² Π±ΡΠ΄ΡΡΠΈΠΉ ΠΏΠΎΡΡ ΠΎΠ± Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
ΠΡΡΡΡΡΠΉ ΠΏΡΡΡ ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS | by Rachel Lum
Β«ΠΏΠΎΡΠ°Π·ΠΈΡΠ΅Β» ΡΠ²ΠΎΠΈΡ Π΄ΡΡΠ·Π΅ΠΉ ΡΡΠΈΠΌΠΈ ΠΏΡΠΎΡΡΡΠΌΠΈ ΠΏΡΠΈΠ΅ΠΌΠ°ΠΌΠΈ!
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΡΠ»ΠΈ Π²Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΡΠΎ ΡΡΠΎΡ ΠΏΠΎΡΡ Π΄Π»Ρ Π²Π°Ρ! Π― ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ± ΠΎΡΠ½ΠΎΠ²Π°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π²Π½Π΅Π΄ΡΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ CSS.ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½ Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΡΠΉ ΠΎΡΠ²Π΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π½ΠΈΠ· Π΄ΠΎ TL; Π Π°Π·Π΄Π΅Π» DR Π² ΡΠ°ΠΌΠΎΠΌ Π½ΠΈΠ·Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π² Π±Π»ΠΎΠ³Π΅. ΠΠΎ ΠΊΠ°ΠΊ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ΄Π°Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ , Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π²ΡΠ΅, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΠ΅Π· Π»ΠΈΡΠ½ΠΈΡ ΡΠ»ΠΎΠ², ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ!
ΠΠΎ ΡΡΡΠΈ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΡΠΈΠ»Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ Π΄ΠΎΡΡΡΠΏ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ ΡΠ΅ΡΠ΅Π· Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, ΠΏΠ»Π°Π½ΡΠ΅Ρ ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π° ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ΅ΠΊΡΡΠ°. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π²Π΅Π±-ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ; Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ» ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΎΠΏΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΎΠ½ ΠΎΠ±ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ. ΠΡΠΎ Π½Π°ΠΏΡΠ°Π²ΠΈΡ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠ»ΠΈΠ²ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π΄ΠΎΡΡΡΠΏ ΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΡΠ°ΠΉΡΠ°ΠΌ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π΅ ΡΡΡΡΠΏΠ°ΡΡ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΌ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ, Π½ΠΎ ΠΎΠ½ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS @media
.
Meta Viewport Tag
Π‘Π°ΠΌΡΠΌ ΠΏΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ viewport Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π°ΡΠ΅Π³ΠΎ HTML-ΡΠ°ΠΉΠ»Π°:
ΠΡΠΎΡ ΡΠ΅Π³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. width = device-width
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠ΅ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, Π° Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΎΠΌ
ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ 1: 1 ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ CSS ΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΌΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ.
Π£ ΠΌΠ΅ΡΠ°ΡΠ΅Π³Π° Π΅ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ, Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎ Π½ΠΈΡ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΡΠΎΠ²Π΅ΡΠ°ΠΌ ΠΏΠΎ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ
ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
Π°ΡΡΠΈΠ±ΡΡΠ°Ρ
CSS, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΡΠΈΡΠΈΠ½Π°
, Π²ΡΡΠΎΡΠ°
, ΠΏΠΎΠ»Π΅
ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
, Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΠΈ ΠΊΠ°ΠΊΡΡ-ΡΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ %
, ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
, em
ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.ΠΡ Ρ
ΠΎΡΠΈΠΌ Π΄Π΅ΡΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ΄Π°Π»ΡΡΠ΅ ΠΎΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π΅Π΄ΠΈΠ½ΠΈΡ - ΡΠ΅Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ.
ΠΠ»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ %
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. auto
ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π² ΡΡΠΎΠΌ ΡΡΠ΅Π½Π°ΡΠΈΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ»Ρ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ: width: 300px
ΠΌΠΎΠΆΠ΅Ρ Ρ
ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π΅Π³ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π°, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΌΠ°ΡΡΡΠ°Π± ΠΈΠ»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. , ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ΅ ΡΡΠΎ.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΌΠ°ΡΡΡΠ°Π± ΠΈΠ»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΡΠΉ ΠΎΠΏΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° width: 100%
ΡΠΎΠΎΠ±ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠΉ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
CSS Media Tag
ΠΠΎΡ Π³Π΄Π΅ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅. ΠΠ΅Π΄ΡΡΡΡ ΡΠΎΠ»Ρ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΠ³ΡΠ°Π΅Ρ ΡΠ΅Π³ media
Π² CSS. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ CSS Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
@media (Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΠΏΡΠΎΡ) {
css-selector {
some-attribute: some-value
...
}
}
ΠΠ°ΠΏΡΠΎΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΡΠ»ΠΎΠ²ΠΈΡ. Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ:
-
min-width
: ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΠΠΠ¬Π¨Π, ΡΠ΅ΠΌ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ -
max-width
: ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΠΠΠ¬Π¨Π ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ -
min-height
: ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ Π²ΡΡΠΎΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΠΠΠ¬Π¨Π, ΡΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ -
max-height
: ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ Π²ΡΡΠΎΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΠΠΠ¬Π¨Π ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Ρ ΠΊΠ»ΡΡΠ°ΠΌΠΈ ΠΈ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ
@media (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
.class-one {
background-color: blue
}
}
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΎΡ 500 Π΄ΠΎ 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .class-one
Π±ΡΠ΄Π΅Ρ ΡΠΈΠ½ΠΈΠΉ
.
ΠΡΡΡΠ΄Π° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ΅ΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΈΡ
Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ»Π±ΡΠ΅ Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅, Π² Π΄Π²ΡΡ
ΡΡΠΎΠ»Π±ΡΠ°Ρ
Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΈ Π² ΡΡΠ΅Ρ
ΡΡΠΎΠ»Π±ΡΠ°Ρ
Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅. ΠΡΠΎΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ @media
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΡΠΈΡΠΈΠ½Ρ. ΠΡΡΠ³ΠΈΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ
ΡΠ»ΠΎΠ² Π½Π° Π·Π½Π°ΡΠΊΠΈ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° , ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π΄ΡΡΠ³ΠΎΠΉ Π½Π°Π±ΠΎΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΡΡΠΈΠ»Ρ. ΠΠ΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡΠ»Π°ΡΡΡΡ Π½Π° Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°.
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Google ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄Π»Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ Π²Π½ΠΎΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΡΠ΅ΡΡΡ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Chrome Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ cmd
+ option
+ j
, ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π² Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ
Π½ΠΈΠΉ ΡΠ³ΠΎΠ» ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΈ ΡΠ΅Π»ΠΊΠ½ΡΡΡ Π·Π½Π°ΡΠΎΠΊ Β«ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΡΠΎΠΉΡΡΠ²Π°Β».Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π΅ΡΡ
Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ
ΡΡΠΈΠ»Π΅ΠΉ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
.
- Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π°ΡΠ΅Π³ΠΎ HTML:
- ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
%
ΠΈauto
Π΄Π»Ρ Π²Π°ΡΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡ. ΠΠ³ΡΠ°Π½ΠΈΡΡΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.- CSS Grid ΠΈ Flexbox - Π²Π°ΡΠΈ Π΄ΡΡΠ·ΡΡ
- ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS
@media
, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠ½ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ CSS Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ- ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Chrome Dev Tools, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ
ΠΠ° ΡΡΠΎΠΌ ΠΌΡ Π·Π°Π²Π΅ΡΡΠ°Π΅ΠΌ Π±ΡΡΡΡΡΠΉ ΠΏΡΡΡ ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ 101! ΠΠ°Π΄Π΅ΡΡΡ, Π²Ρ Π½Π°ΡΠ»ΠΈ ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ.ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ ΠΊ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ Π½ΠΈΠΆΠ΅, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ .
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½: 50 ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΡΡ ΠΏΡΠ°ΠΊΡΠΈΠΊ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΠΈ β’ 2 Π΄Π΅ΠΊΠ°Π±ΡΡ 2017 Π³. β’ 18 ΠΌΠΈΠ½ΡΡ ΠΠ ΠΠ§ΠΠ’ΠΠ’Π¬
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π’Π΅ΡΠΌΠΈΠ½ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ»ΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.Π’ΠΎΡΠ½Π΅Π΅, ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ 4 ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 1292 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ 1025 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΏΡΠΎΡΠ°Π΅ΡΡΡ Π΄ΠΎ 2 ΡΡΠΎΠ»Π±ΡΠΎΠ². ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΡΠΌΠ°ΡΡΡΠΎΠ½Π° ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°. ΠΡΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ Β«Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌΒ».
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - ΡΡΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³Π°Ρ Π²Π΅ΡΡΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ΅ΠΌ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ΅ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ (ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΠΆΠΈΠ΅) Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ ΠΎ ΠΏΠ»ΡΡΠ°Ρ ΠΈ ΠΌΠΈΠ½ΡΡΠ°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.ΠΡΠΎΡ Π±Π»ΠΎΠ³ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠΊΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΡΠ°ΡΠΊΡΠΎΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΊΡΠΎΠ² ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΈΠ½ΡΡΠΈΠ½ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² Π²ΡΠ±ΠΎΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½ΠΎΠ²ΡΠ΅ Π·Π°ΠΏΡΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π²ΡΠ΅ΠΌΡ ΠΎΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ; ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΡΡΡΠ²Π°Π΅Ρ Π²Π½Π΅Π·Π°ΠΏΠ½ΡΠ΅ ΠΈ ΡΠ°Π΄ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΠΈ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°ΠΉΡΠ°. ΠΠΊΡΠΏΠ΅ΡΡΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS, ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΠΏΡΡΠΆΠΎΠΊ.
Π‘ΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ Π΄Π°Π½Π½ΡΡ , ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΎΡΠΎΠ±ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π΄Π»Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°.Π’Π°Π±Π»ΠΈΡΡ Π΄Π°Π½Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΡΠΈΡΠΎΠΊΠΈ, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΊΡΠΎ-ΡΠΎ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ ΠΌΠ°ΡΡΡΠ°Π±, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΡ ΡΠ°Π±Π»ΠΈΡΡ, ΠΎΠ½Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ. ΠΠΎΠ³Π΄Π° ΠΊΡΠΎ-ΡΠΎ ΠΏΡΡΠ°Π΅ΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΌΠ°ΡΡΡΠ°Π±, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΠΈΡΠ°Π΅ΠΌΡΠΌ, ΠΎΠ½ ΠΈΠ»ΠΈ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΅Π³ΠΎ. Π§ΡΠΎ ΠΆ, Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΠ΅ΡΠ΅ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ Π΄Π°Π½Π½ΡΡ Π² ΠΊΡΡΠ³ΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈ-Π³ΡΠ°ΡΠΈΠΊ - ΡΡΠΎ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠΈΠ½ΠΈ-Π³ΡΠ°ΡΠΈΠΊ ΠΈΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π°ΠΆΠ΅ Π½Π° ΡΠ·ΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ .
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎ-Π·Π°Π²ΠΈΡΠΈΠΌΡΠΌΠΈ.ΠΡΠΎΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ»ΡΠΆΠΈΡ ΡΠ΅Π»ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΠΈΡΡΠΈΠ½Π½ΠΎΠΌ ΡΠΌΡΡΠ»Π΅ ΡΠ»ΠΎΠ²Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»ΡΠΆΠ°Ρ Ρ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΡ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² Π΄ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ . ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠ»Π°Π²Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΈ ΡΠ·ΡΠΊΠΎΠ² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ΅ΡΠΊΠΈΠΌ Π² Π»ΡΠ±ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΠΈ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΠ΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ²ΠΎΡΠΈΡΡ ΡΡΠ΄Π΅ΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.
ΠΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΈΡΠ΅ΠΌ
Π‘ Postcards Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΈΡΠ΅ΠΌ ΠΎΠ½Π»Π°ΠΉΠ½ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π½Π°Π²ΡΠΊΠΎΠ² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ! ΠΠΊΠ»ΡΡΠ°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 100 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΏΠΈΡΠ΅ΠΌ Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΡΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
Designmodo
Designmodo ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΠΈΡΡΡΠΉ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ΅ΠΊΡΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠΊΡΠ°Π½Π°Ρ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
Π‘Π°ΠΉΠΌΠΎΠ½ ΠΠΎΠ»Π»ΠΈΡΠΎΠ½
Π₯ΠΎΡΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠΎΡ ΡΠ΅ΡΠΎΠ²Π°ΡΡΠΉ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Π² ΡΠ΅ΡΠΎΡΠ½ΠΎΠΌ ΡΡΠΈΠ»Π΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΊΡΡΠ½ΡΠΌ ΠΈ ΡΠ½ΡΠ»ΡΠΌ, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π±ΡΠ» Π²ΡΠΏΡΡΠ΅Π½, ΠΎΠ½ ΠΏΡΠΎΠΈΠ·Π²Π΅Π» Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠΎΡ ΡΠ²ΠΎΠΈΠΌ Π²ΡΡΠΎΠΊΠΎΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π° Π·Π°ΠΊΠ»ΡΡΠ°Π»Π°ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠ» ΡΠ²ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π² ΡΠ΅ Π΄Π½ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°Π±ΠΈΡΠ°Π»ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΠΎΠ±ΡΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠ΅ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠ²Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ·ΡΡΠ½ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡΡΡ.
Andersson-Wise Architects
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°ΠΉΡ ΠΏΠΎΡΠ²ΡΡΠ΅Π½ Π°ΡΡ ΠΈΡΠ΅ΠΊΡΡΡΠ½ΠΎ-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΎΠΉ ΡΡΡΠ΄ΠΈΠΈ, Π½Π΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ Π½Π°Π²ΡΠΊΠΈ, ΠΎΠΏΡΡ ΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.
Π¦Π΅Π»Π΅Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ 3 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°Π·Π΄Π΅Π»Π°, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΡΠΎΠ½Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΈΠ±ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΊΡΡΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π΄Π»Ρ ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ.
Π‘ΡΠΈΠ²Π΅Π½ ΠΠ΅ΠΉΠ²Π΅Ρ
Stephen Caver ΠΈΠΌΠ΅Π΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠΊΠ»Π°ΡΡΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΠΈ. ΠΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠΈΡΠ΅, ΡΡΠΎ Π² ΡΡΠΎΠΌ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ. ΠΡΠ²Π΅Ρ ΠΏΡΠΎΡΡ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½Π΅Π΅ Π½Π° ΠΏΠ΅ΡΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅; ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ·
- ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΠΎΠ΅ Π³ΡΡΠ±ΠΎΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΎΠΉ;
- Π½Π°Π±ΠΎΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ², Π΄ΡΠ±Π»ΠΈΡΡΡΡΠΈΠΉ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Π²Π΅ΡΡ Ρ;
- ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ Π²Π΅Π΄Π΅Π½ΠΈΡ Π±Π»ΠΎΠ³Π°.
Π’Π°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ, 3 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π°ΡΠΏΠ΅ΠΊΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.ΠΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π΄Π°Π΅Ρ Π½Π°ΠΌ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ, ΠΊΠ°ΠΊ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°, ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ ΠΈ ΡΠ°Π·Π΄Π΅Π» Π±Π»ΠΎΠ³Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠΎΡΠΎΠ±ΠΊΠ° Π·Π°ΠΆΠΈΠ³Π°Π½ΠΈΡ
Sparkbox Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΠ°ΠΊΠ΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡ; ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΌ Π½Π°Π±ΠΎΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ Π΄Π°Π½Π½ΡΠ΅ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. Π’Π°ΠΊΡΡ ΡΡΡΡΠΊΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊ ΡΠΊΡΠ°Π½Π°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π±Π΅Π· ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΠΉ ΠΏΡΠ΅ΡΠ΅ΡΠΏΠ΅Π²Π°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠ»Π°Π²Π½ΠΎ ΠΈ Π±Π΅Π· ΡΡΠΈΠ»ΠΈΠΉ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ.
Food Sense
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π»Π΅Π²ΠΎΡΡΠΎΡΠΎΠ½Π½Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΆΡΡΠ½Π°Π»Π° Π² ΡΡΠΈΠ»Π΅ Π±Π»ΠΎΠ³Π°, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ Π°ΠΏΠΏΠ΅ΡΠΈΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΡΠ½ΠΎΠΌΡ ΠΌΠ°ΠΊΠ΅ΡΡ - Π²ΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΏΡΠΎΡΠ΅ΡΡ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ Π½Π° ΡΡΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
ΠΠ΄Π½Π°ΠΊΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΡ ΡΠ΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π΅Ρ; Π‘ΡΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΡΠΈΠΏΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ ΠΈΠ· ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π½ΠΎΠ²ΡΡ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΡ ΠΈ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈΠ·Π±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΡΠΈΠΊΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π³ΡΡΠ·ΠΊΠΈ.
The Boston Globe
Boston Globe - ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅. ΠΠ΅Π±-ΡΠ°ΠΉΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ Π²Π΅ΡΡΠΈ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ, ΡΠ°ΡΡΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌΡΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΆΡΡΠ½Π°Π».
Π₯ΠΎΡΡ, ΠΊΠ°ΠΊ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ, Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΡΠ»ΠΎΠΆΠ½ΡΠΉ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄, Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ΄Π½ΠΎ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½ΠΎΠ΅.ΠΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ ΡΠ°Π·Π±ΠΈΠ» Π²ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π½Π° 3 ΡΡΠΎΠ»Π±ΡΠ°, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΡΠΎΡΡΡ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°, ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π½ΠΎ Π²Π΅ΡΠ½ΠΎ ΠΏΡΠΎΠΏΡΡΠΊΠ°Ρ ΡΡΠ°ΠΏΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ Π² 2 ΡΡΠΎΠ»Π±ΡΠ° ΠΈ Π½Π°ΠΊΠΎΠ½Π΅Ρ Π² ΠΎΠ΄ΠΈΠ½; ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π²Π°ΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ².
Think ΠΠΈΡΠ°ΠΌΠΈΠ½
ΠΡΠ»ΠΈ ΡΠ΅ΡΡΠ½ΠΎ, Think Vitamin Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡ Π²Π°ΡΡΠ°ΡΡΡΡ ΡΠ΅ΠΌ-ΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΡΠΌ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°. Π£ Π½Π΅Π³ΠΎ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, ΠΊΠ°ΠΊ ΠΈ Ρ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ . ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ 1 ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠΎΠ»Π±Π΅Ρ Ρ ΠΏΡΠ°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ Ρ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ°ΠΌΠΈ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ ΠΈ ΠΏΠ°Π½Π΅Π»ΡΡ ΠΏΠΎΠΈΡΠΊΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² Π²ΠΈΠ΄Π΅ Π½Π°Π±ΠΎΡΠ° Π±Π»ΠΎΠΊΠΎΠ².
ΠΠ΄Π½Π°ΠΊΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ Π±Π΅Π·Π΄ΡΠΌΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Ρ; ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΈΠ»Ρ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½Π°Ρ ΡΠ²Π΅ΡΠΎΠ²Π°Ρ ΠΏΠ°Π»ΠΈΡΡΠ° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡ Π±Π»ΠΎΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΠΈ ΠΈ ΡΠ΅ΠΊΠ»Π°ΠΌΠ°, ΡΠ»ΡΡΡΠ°Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΠ²ΡΡΠ°Ρ ΡΠ΄ΠΎΠ±ΠΎΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΡ.
Sasquatch! ΠΡΠ·ΡΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΡΡΠΈΠ²Π°Π»Ρ
Π‘Π°ΡΠΊΠ²ΠΎΡΡ! ΠΡΠ·ΡΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΡΡΠΈΠ²Π°Π»Ρ ΠΈΠΌΠ΅Π΅Ρ Π΄Π΅Π»ΠΎ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π΄ΠΎΠ±Π°Π²ΠΎΠΊ ΠΏΡΠΈΠΏΡΠ°Π²Π»Π΅Π½ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΡΡΠΊΠΎΠΏΠΈΡΠ½ΡΠΌΠΈ Π½Π°Π΄ΠΏΠΈΡΡΠΌΠΈ ΠΈ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ.ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ .
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠ°Π½ΠΎ. ΠΠ½ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΡ Π΄Π΅ΡΠ°Π»Ρ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΡΡΠ½ΡΠΉ Π²ΠΈΠ΄, Π½Π΅ ΡΠ΅ΡΡΡΡΠΈΠΉ ΡΠ²ΠΎΠ΅ΠΉ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ Π΄Π°ΠΆΠ΅ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ .
ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΈΡΡΡΠΉ, Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° Π³ΠΈΠ±ΠΊΠΎΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠ΅. ΠΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ Π·Π΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ Π΄ΠΈΡΡΠ΅ΡΠ΅Π½ΡΠΈΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ½ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΠΎΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
Π’Π°ΠΊΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ, Π½ΠΎ ΠΌΠΎΡΠ½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΠΎΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π³Π΄Π΅, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π²ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ·-Π·Π° ΠΏΡΠΈΡΡΡΠ΅ΠΉ Π΅ΠΌΡ ΠΌΠΎΠ½ΠΎΡΠΎΠ½Π½ΠΎΡΡΠΈ ΠΌΠΎΠΆΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π·ΡΡΡΠΈΡΡ Π²ΡΡ ΠΏΠΈΠΊΠ°Π½ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ½ΠΈΠ·ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ. .
Staffanstorp
ΠΠ΄Π΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΊΠ°ΠΊ ΠΊ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠΊΡΠ°Π½Π°ΠΌ, ΡΠ°ΠΊ ΠΈ ΠΊ Π±ΠΎΠ»ΡΡΠΈΠΌ Π΄Π°Π΅Ρ ΡΠ°ΠΊΠΈΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°, ΠΊΠ°ΠΊ
- ΠΎΡΠ»ΠΈΡΠ½Π°Ρ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ;
- Ρ ΠΎΡΠΎΡΠΎ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ;
- Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠ°ΡΠ΅Π»ΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ.
Π₯ΠΎΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±Π»ΠΎΠ³Π° Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ , Π΅Π³ΠΎ ΡΡΡΠ΅ΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠΈΡΡ ΡΠ΅ΠΊΡΡΠΈΠ΅ Π²Π΅Π±-ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π΅Π³ΠΎ Π½Π° ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΠ°ΡΠΏΠΎΡΡΠ½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΠΊΠΈ, Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΠ»ΡΠΆΠΈΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π£ Π½Π΅Π³ΠΎ Π΄Π°ΠΆΠ΅ Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Β«ΠΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΡΒ», ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠ½ΠΎ, ΡΡΠΎ Π²ΡΠ΅ Π·Π΄Π΅ΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΎ Π½Π° ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠΉ Π΄Π΅Π³ΡΠ°Π΄Π°ΡΠΈΠΈ. ΠΠ°ΠΊ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π»ΠΎΡΡ, ΠΊΠΎΠΌΠ°Π½Π΄Π° ΡΠ΄Π΅Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ , ΡΠ΅ΠΌ ΡΡΡΠ΅ΡΠΈΠΊΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΈΠ»Ρ ΡΡ ΠΎΠ΄ΠΈΡ Π² ΡΠ΅Π½Ρ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π±Π»ΠΎΠΊ, ΠΎΠ±Π»Π°ΡΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΡΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ, ΠΏΠΎΠΊΡΡΠ²Π°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΠΌΠ°Π½Π΄Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΠΏΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ.
ΠΠ°ΠΎΠΌΠΈ ΠΡΠΊΠΈΠ½ΡΠΎΠ½
ΠΠ°ΠΎΠΌΠΈ ΠΡΠΊΠΈΠ½ΡΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠΎΠ·Π°ΠΈΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠ΅Π΄ΠΈ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ ΡΡΠ°Π·Ρ ΠΏΡΠΎΠ»ΠΈΡΡ ΡΠ²Π΅Ρ Π½Π° ΡΠ²ΠΎΠΈ ΡΠ°Π±ΠΎΡΡ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
Π‘Π°ΠΉΡ Π·Π°ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΡ Π½Π΅ ΠΈΠ·-Π·Π° Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½, ΠΌΡΠ³ΠΊΠΎ Π³ΠΎΠ²ΠΎΡΡ, ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΆΠ΅Π»Π°ΡΡ Π»ΡΡΡΠ΅Π³ΠΎ, Π° Π·Π° ΡΡΠ΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΠ΅Π³ΡΠ»ΡΡΠ½ΡΡ ΡΠ΅ΡΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅ΡΠΊΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π ΡΡΠΎ Π΅ΡΠ΅ Π½Π΅ Π²ΡΠ΅. ΠΌΠ΅ΡΠ°ΠΌΠΎΡΡΠΎΠ·Ρ ΠΏΠΎΠ΄ΠΊΡΠ΅ΠΏΠ»ΡΡΡΡΡ ΠΏΡΠΈΡΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΡΡΠΏΠΏΠ° ΠΏΡΠ΅Π΄ΠΊΠΎΠ²
Π§ΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ ΡΠ°ΠΉΡΠ΅? ΠΠ½, Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ ΠΎΡΡΠ΅ΡΠ»ΠΈΠ²ΠΎΠ΅, Π²Π΅ΡΡΠΌΠ° ΠΎΡΠ΅Π»ΠΎΠΌΠ»ΡΡΡΠ΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΈΠΌ Π½Π΅ΠΏΡΠ΅Π²Π·ΠΎΠΉΠ΄Π΅Π½Π½ΡΠΌ ΠΈΠ·ΡΡΠΊΠ°Π½Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.ΠΠΎΠΌΠ°Π½Π΄Π° Π½Π΅ ΠΏΠΎΡΠΊΡΠΏΠΈΠ»Π°ΡΡ Π½Π° Π°ΡΡΠΈΡΡΠΈΠ·ΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΡΠ°Π·Π½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ°Ρ .
ΠΠ΅Π±-ΡΠ°ΠΉΡ ΠΎΡΠ°ΡΠΎΠ²ΡΠ²Π°Π΅Ρ ΡΠ²ΠΎΠ΅ΠΉ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΎΠΉ Π² ββΡΠ΅ΡΡΠΎ-ΡΡΠΈΠ»Π΅, ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡΠΌΠΈ, ΡΠ΅ΠΊΡΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΠΈ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅ΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠΉ; ΠΈ Π²ΡΠ΅ ΡΡΠΈ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π»ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΎΡΠΎΠ±ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠΎΠΌΠ°Π½Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΡΠ΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄Π΅ΡΠ°Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π² ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ, ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΡΡΠ΅Π΅ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ, ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠ°ΡΠΌΠ°Π½Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠ°ΡΡΡΠ±ΠΊΠ°
ΠΠ΄Π΅ΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΎΡΠΏΠ΅ΡΠ°ΡΠΎΠΊ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΏΠΎΡΡΡΠΎΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ , Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈ Π½Π° Π²Π²ΠΎΠ΄Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ, Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠ΅ ΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π² ΠΌΠ΅Π½Ρ.
ΠΡΠΈΠ½ΠΈΠΌΠ°Ρ Π²ΡΠ΅ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΡΠ΄Π°Π»ΠΎΡΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π°ΡΠ΄ΠΈΡΠΎΡΠΈΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΏΡΠΈΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ ΠΎΡΠ°ΡΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΎΡΡΠ°ΠΆΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°.
ΠΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΡ Β«ΠΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Β» 2012
ΠΡΠ½ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ.Π Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΡΡΠ²ΡΠ΅Ρ Π²Π½Π΅ΡΠ½Π΅ΠΌΡ Π²ΠΈΠ΄Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π½ΠΎ ΠΈ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ ΠΏΡΠ±Π»ΠΈΠΊΡΠ΅Ρ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΠΎΡΠ²ΡΡΠ΅Π½ ΠΊΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΠΈ ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, ΠΎΡΠ΅Π½Ρ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΡΠΎΡΠ½Π½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ, ΡΡΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΎΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½Π° ΠΎ ΡΠ΅ΠΊΡΡΠΈΡ Π²Π΅Π±-ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΡ ΠΈ ΡΡΡΠΎΠ³ΠΎ ΠΈΡ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. ΠΠΎΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠ°ΠΌΠΈ - Π²Π°ΠΆΠ½ΡΠΉ ΡΠ°Π³ ΠΊ ΡΡΠΏΠ΅Ρ Ρ.
Illy Issimo
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ - Π²Π°ΠΆΠ½Π°Ρ ΡΠ΅ΡΡΠ° Π»ΡΠ±ΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ.ΠΠ»Π»ΠΈ ΠΡΡΠΈΠΌΠΎ Π½Π°ΡΡΠΈΠ»ΡΡ ΡΡΠΎΠΌΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π³ΠΈΠ±ΠΊΡΡ ΡΠ΅ΡΠΊΡ Π΄Π»Ρ
- ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ;
- ΡΠ°ΡΡΠΈΡΠΈΡΡ ΡΠ΅Π»Π΅Π²ΡΡ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΡ;
- ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅Π³ΠΎ ΡΠ΅ΠΊΠ»Π°ΠΌΠ½Π°Ρ ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΡ, Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΠΈΠ΄Π΅Ρ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ.
ΠΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΡ Arrrrcamp
ΠΠ΅Π±-ΡΠ°ΠΉΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ Π½Π° ΡΠ΅ΠΊΡΡ, ΡΠ΅ΠΌ Π½Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° Π½Π° Π±Π΅Π»ΠΎΠΌ ΠΌΠΎΠ½ΠΎΡΠΎΠ½Π½ΠΎΠΌ ΡΠΎΠ½Π΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠ΄Π½ΡΡ Β«ΠΏΡΠΈΠ·ΡΠ°ΡΠ½ΡΡ Β» ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠ΅ΡΠ΅ΡΠΏΠ΅Π²Π°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°; ΠΎΠ½ ΡΠΌΠ΅Π»ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ 1920 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Ρ 240 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π»ΡΠ±ΠΈΡΠ΅Π»ΠΈ Ruby ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π²Π΅ΡΠ΅ΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΠΈ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
Π ΠΎΠ±ΠΎΡ ΠΈΠ»ΠΈ Π½Π΅Ρ?
Π ΠΎΠ±ΠΎΡ ΠΈΠ»ΠΈ Π½Π΅Ρ? - ΡΡΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π³ΠΈΠ±ΠΊΡΡ ΡΠ΅ΡΠΊΡ.
ΠΠ±Π»Π°Π΄Π°Ρ ΡΠ°Π²Π½ΡΠΌ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ Π΄Π°Π½Π½ΡΡ , Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΡ Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ) ΠΈ ΡΠ±ΠΈΡΠ°Ρ Π²ΡΠ΅ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΡ ΠΈ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΡΡΠΈΠ»Ρ, ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΡΡ ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΊΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΡΠΊΡΠ°Π½Π°.
Π§Π°Ρ ΠΠ΅ΠΌΠ»ΠΈ
Π§Π°Ρ ΠΠ΅ΠΌΠ»ΠΈ - ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, Π½Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠΉ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΡΠ°ΡΠΈΠ²Π°Ρ Π³ΡΠ°ΡΠΈΠΊΠ° ΠΈ ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π°Π΄Π°ΠΏΡΠ°ΡΠΈΡ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π° ΠΈ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠ°Π½Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΡΡΠ°Π΄Π°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½Π΅ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡΠΌΠΈ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ², Π½Π΅ Π³ΠΎΠ²ΠΎΡΡ ΡΠΆΠ΅ ΠΎΠ± ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΌΠ΅Π½ΡΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅.
TeixidΓ³
ΠΡΠ΅Π°ΡΠΈΠ²Π½Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ Π³Π΅Π½ΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΡΡ, ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΡΡΠ½ΠΊΠΎΠ² ΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ, ΡΡΠΎΠ±Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ Π² ΡΠ΅ΡΠΈ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ.
Π₯ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ ΡΡΠΎΡΠΎΠ½Π° ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ°Ρ. ΠΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ ΡΠΌΠ΅Π»ΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊ ΠΊΠΎΠ½ΠΊΡΡΠ΅Π½ΡΠ½ΠΎΠΉ ΡΡΠ΅Π΄Π΅? ΠΠ΄Π΅ΡΡ ΡΠΎΠΆΠ΅ Π²ΡΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. Π₯ΠΎΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΡΠ°ΡΠΈΡΠ΅Π½, Π½Π° Π½Π΅ΠΌ Π½Π΅Ρ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈΠ»ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ·ΡΠΌΠΈΠ½ΠΊΠΈ, Π½ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΡΠΏΠ°ΡΠ°Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
Π ΠΈΠ±ΠΎ
Ribot - ΡΡΡΠ΄ΠΈΡ ΡΠΈΡΡΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠ΄ΡΡΠ³ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ.
ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π·Π΄Π΅ΡΡ - ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ ΡΠ°ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΡΠ°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΊΡΠ°Π½Ρ ΡΠ°ΠΊΠΈΡ Π³Π°Π΄ΠΆΠ΅ΡΠΎΠ², ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈ ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠΎΡΠ½Π½ΡΠΌ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅ΡΠ²ΠΈΡΠ° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ Ρ ΡΡΠ»ΡΠ³Π°ΠΌΠΈ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.
ΠΠ΅ΡΠ΅Π½ ΠΠ΅ΡΠΊΠΈΠ½
Deren Keskin ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠ΅, ΡΠΈΡΡΠΎΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅, ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΏΡΠΈΠ±Π΅Π³Π°Π΅Ρ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»Ρ, ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΆΠ΄Π°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π΄Π°ΠΆΠ΅ Π±Π»ΠΎΠ³ ΠΏΠΎΠ΄ΠΏΠ°Π΄Π°Π΅Ρ ΠΏΠΎΠ΄ ΡΡΠΎ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅.
Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΈ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠΌΠΈ (ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΡ Π΅ΠΌΠ΅) ΠΌΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π²ΡΠ΅ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ, ΠΏΠΎΠΊΠ° Π²ΡΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π΅ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ ΡΠ΄Π°Π΅ΡΡΡ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π²ΡΠ΅ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΡΡΠ°Π²Π½ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°Π½Π΅Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ»ΡΠ± ΡΠ»Π°Π΄ΠΊΠΈΡ ΡΠ»ΡΠΏ
ΠΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ»ΠΎΡΠ½ΠΎ ΡΠΏΠ°ΠΊΠΎΠ²Π°Π½ΠΎ. ΠΠ°ΠΊΠ΅Ρ Π² Π³Π°Π·Π΅ΡΠ½ΠΎΠΌ ΡΡΠΈΠ»Π΅ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°ΠΉΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠ»ΡΠ± Π»ΡΠ±ΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ»ΡΠΏ.
Π’Π΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π·Π°Π±ΠΎΡΠΈΡΡΡΡ ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ΅ ΠΈΡ ΠΏΠΎΠ΄ Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅. ΠΠ΄Π΅ΡΡ ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ°ΠΉΡΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ 2 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, ΠΊΠ°ΠΊ ΠΈ ΠΈΡΡ ΠΎΠ΄Π½Π°Ρ.
Π³Π»ΡΠΊ
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡ Π·Π°ΠΊΡΡΡ. ΠΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ Π΄Π΅ΡΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΏΠΎ ΠΏΡΠΎΠ΅ΠΊΡΡ, ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠ½ΡΠ΅ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ. ΠΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΎΠ΄Π½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠ°Ρ ΠΎ Π±ΡΠ»ΡΡ Π²ΡΠ΅ΠΌΠ΅Π½Π°Ρ .
ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠ°ΡΡΡ Π½ΠΈΠΊΠΎΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΏΡΠΈΡΡΡΠ΅Π΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ. ΠΠ°ΠΆΠ΅ ΡΠ΅ΠΉΡΠ°Ρ, Π±ΡΠ΄ΡΡΠΈ Π½Π΅ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΌ, ΠΎΠ½ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ ΠΈ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ²Π΅Π΄ΠΎΠΌΠ»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΎ ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½Π°ΡΠΊΠ½ΡΠ»ΠΈΡΡ Π»ΠΈ ΠΎΠ½ΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡ, ΡΠΈΠ΄Ρ Π·Π° Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½.
dConstruct
dConstruct - ΡΡΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΡΠΌ ΠΈ ΡΠ΅ΠΌΠΈΠ½Π°ΡΠ°ΠΌ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ·ΡΡΠ°ΡΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ ΠΈ ΠΊΡΠ»ΡΡΡΡΠ΅. Π₯ΠΎΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π΅Π½, Π½ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½Π°Ρ ΡΡΠΎΡΠΎΠ½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΎΠ±ΡΠ°ΡΠ°Π΅Ρ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° 3 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ°:
- ΠΏΡΠ΅ΠΏΠΎΠ΄Π°Π²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠ΅ΠΌΠΈΠ½Π°ΡΠΎΠ²;
- ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠΏΡΠΈΡΡΠΈΡ;
- ΡΠΏΠΎΠ½ΡΠΎΡΠΎΠ².
ΠΡΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΠ°ΡΠΏΠΎΡΡΠ½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΠΊΠΈ, Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΠΎΡΠ²ΡΡΠ΅Π½ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ. Π’ΠΎΡΠ½Π΅Π΅, ΡΡΠΎ ΠΏΡΠΎΠΌΠΎ-ΡΠ°ΠΉΡ, ΡΠ΅ΠΊΠ»Π°ΠΌΠΈΡΡΡΡΠΈΠΉ ΠΊΠ½ΠΈΠ³Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΡΠ²Π΅ΡΠΈΡ Π½Π° Π²ΡΠ΅ Π²Π°ΡΠΈ Π²ΠΎΠΏΡΠΎΡΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎ, ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΅Π³ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ²ΠΎΠΈΡ Π½Π°Π²ΡΠΊΠΎΠ², ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΎΠ±ΡΡΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π·Π°Ρ ΠΎΠ΄ΡΡ Π½Π° Π½Π΅Π³ΠΎ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΡΡΠ΅Π½ΡΠΈΡΠ½ΡΠ΅ Π²Π°ΠΊΠ°Π½ΡΠΈΠΈ
Authentic Jobs - ΡΡΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠ°ΡΠ°Π»ΠΎΠ³, ΠΏΡΠΈΠ·Π²Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ°Π±ΠΎΡΠΎΠ΄Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠΎΠΈΡΠΊΠ°ΡΠ΅Π»Π΅ΠΉ.ΠΠ½ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅ ΡΠ΅ΡΠ΅Π· ΠΌΠ°ΠΊΠ΅Ρ Π² Π²ΠΈΠ΄Π΅ ΡΠΏΠΈΡΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»Π΅Π³Π°Π½ΡΠ΅Π½ ΠΈ ΠΏΡΠΎΡΡ Π² ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΡΡΠΈ Π·Π° ΡΡΠ΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΎΡΠΎΠ±ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΡΡΠΊΡΡΡΠ° ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½Π΅ΠΉ; ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΠΏΡΠ΅ΡΠ΅ΡΠΏΠ΅Π²Π°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, - ΡΡΠΎ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π½ΠΈΠ· ΠΏΠΎ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ, ΡΡΡΡΠΏΠ°Ρ ΠΌΠ΅ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π»Π΅Π²Π°Π½ΡΠ½ΡΠΌ ΠΈ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΡΠΌ Π΄Π°Π½Π½ΡΠΌ.
ΠΡΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠ°Π³ΠΎΠ²
ΠΠ΅Π±-ΡΠ°ΠΉΡ Five Simple Steps ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΡΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΠΏΡΡΡΡΠ²ΠΈΡ ΠΈ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΠΎΡ ΡΠ΅Ρ , ΠΊΡΠΎ ΡΠ°Π½Π΅Π΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΠΈΠ» ΡΡΠΈΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠΌ.
ΠΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° - Ρ ΠΎΡΠΎΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΡΠΈΠΊΠ΅ΡΠ°, ΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ ΡΡΠΎ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ. ΠΠ°ΠΆΠ΅ Π±ΡΠ΄ΡΡΠΈ Π·Π°ΠΊΡΡΡΡΠΌ, Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΠΈΠΌ Π²Π΅Π±-ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΡ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ².
Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΠΉ
Splendid - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π°ΠΊΡΠ΅Π½ΡΠΈΡΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π° Π½Π°Π²ΡΠΊΠ°Ρ ΠΈ ΠΎΠΏΡΡΠ΅ Ρ ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². ΠΡ Π½Π΅ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½ΠΈ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ, Π½ΠΈ Π³Π΅Π½ΠΈΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²; Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Π±Ρ, ΠΈ ΠΎΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΡΠ΅Π·ΠΊΠΎ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠΈΡΡΠ΅Ρ Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΊΡΠ΅Π°ΡΠΈΠ²ΡΠΈΠΊΠΎΠ².
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ. Π₯ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊ ΡΡΠ²ΡΡΠ²ΡΠ΅Ρ, ΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ» ΠΈ Π±ΡΠ΄Π΅Ρ Π² ΡΠ΅Π½ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ Π·Π°Π±ΠΎΡΠΈΡΡΡ ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΊ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠΊΡΠ°Π½Π°ΠΌ.
Π Π°ΠΉΠ°Π½ ΠβΠ ΡΡΠΊ
ΠΠΎΠ³Π΄Π° ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π΅ΡΡΡΡ Ρ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ Π Π°ΠΉΠ°Π½Π° ΠβΠ ΡΡΠΊΠ°, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΡΠ΅ΡΡΡ ΠΌΡΠ΄ΡΠΎΠΉ ΡΡΠ°Π·ΠΎΠΉ Β«Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΠΎΡΡΡ, Π΄ΡΡΠ° ΠΎΡΡΡΠΎΡΠΌΠΈΡΒ» ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΎ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ. ΠΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ ΠΈ Π΅ΡΠ΅ ΡΠ°Π· ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ ... Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ΄Π½ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΎΡΡΡ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ gif, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΡΡ Π΅Π³ΠΎ Π΄Π΅ΡΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ Π³ΠΎΡΠΎΠ²ΡΠΌ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅Π±-Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ.
FlexSlider
FlexSlider - ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ jQuery ΠΎΡ WooThemes Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΎΠΉ ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ΅Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΡΠΎΠ·Π΄Π°Π½, ΡΡΠΎΠ±Ρ ΡΡΠ°ΡΡ Π²Π°ΡΠΈΠΌ Π½Π°Π΄Π΅ΠΆΠ½ΡΠΌ ΠΏΠΎΠΌΠΎΡΠ½ΠΈΠΊΠΎΠΌ Π΄Π»Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅.
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°, ΠΏΡΠΎΠ΄Π²ΠΈΠ³Π°ΡΡΠ°Ρ ΠΏΡΠΎΠ΄ΡΠΊΡ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°, Π½Π΅ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ.Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΊΠΎΠΌΠ°Π½Π΄Π° ΡΠΏΡΡΡΠΈΠ»Π° ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²ΡΠ²Π°Π΅Ρ.
ΠΠ»Ρ Π‘Π΅Π½Π΄Π΅ΡΠΎ Π΄Π΅Π»Ρ ΠΠ°ΠΊΠ°ΠΎ
El Sendero del Cacao - ΡΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΠΎ ΡΠΏΠΎΠΊΠΎΠΉΠ½ΠΎΠΉ ΠΈ ΡΠ΅ΠΏΠ»ΠΎΠΉ Π°ΡΠΌΠΎΡΡΠ΅ΡΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΠ²Π΅ΡΠΎΠ², ΡΡΡΠ΅ΠΊΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅Π³ΡΠ°Π»ΡΠ½ΡΠΌ ΡΡΠ½ΠΊΡΠΈΡΠΌ, ΠΊΠ°ΠΊ
- ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ°;
- ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ;
- ΡΠ΄ΠΎΠ±Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ;
- ΠΌΠ½ΠΎΠ³ΠΎΡΠ·ΡΡΠ½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°.
Π‘Π°ΠΉΡ ΡΠΏΠΎΡΠΎΠ±Π΅Π½ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΏΡΠ΅Π΄Π°ΡΡΡΡ ΠΏΡΠΈΡΡΠ½ΠΎΠΌΡ Π²ΡΠ΅ΠΌΡΠΏΡΠ΅ΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π΅Π½ΠΈΡ.
Π§ΠΈΡΠ°ΡΡ Π»Π΅ΠΊΡΠΈΠΈ
Do Lectures - ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΡΠΉ Π±Π»ΠΎΠ³, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ ΠΈ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. ΠΠ΅Π±-ΡΠ°ΠΉΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠ°ΡΠΎΠΌΠΎΠ΄Π½ΡΠΌ ΠΈΠ·-Π·Π° ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ Retina ΡΠ°ΠΉΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° ΠΎΠ³ΡΠΎΠΌΠ½ΡΡ ΡΠΊΡΠ°Π½Π°Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ², ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π²ΡΠ΅ Π½Π΅ ΡΠ°ΠΊ ΡΠ°Π΄ΡΠΆΠ½ΠΎ.Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ Π·Π΄Π΅ΡΡ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π°, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡΡ Ρ Π½Π΅ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΌΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π¨ΠΊΠΎΠ»Π° Π‘Π²ΡΡΠΎΠ³ΠΎ ΠΠ°Π²Π»Π°
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΠ΅Π±Π½ΡΠ΅ Π·Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ. ΠΠ°ΠΆΠ΅ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠΊΠΎΠ»Ρ Π‘Π²ΡΡΠΎΠ³ΠΎ ΠΠ°Π²Π»Π° Π½Π΅ ΠΎΡΡΡΠ°Π΅Ρ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ , ΠΈΠΌΠ΅Ρ ΡΠ°ΠΉΡ Ρ
- ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ΄Π΅ΡΠΆΠ°Π½Π½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄;
- Π²ΡΡΠΎΠΊΠΎΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½Π°Ρ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°;
- ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ;
- ΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ².
Π ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠΊΠΎΠ», ΡΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎ-ΡΠΎ. ΠΠ°Π»ΠΈΡΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ, Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΊΡΡΠ²Π°Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π½ΠΎ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΡΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΉ Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΡΠΆΠΎΠΊ Π½Π°Π΄ Π³ΠΎΠ»ΠΎΠ²ΠΎΠΉ.
ΠΠΈΠ·Π°ΠΉΠ½ ΠΠ°ΠΎΠΌΠΈ ΠΡΠΊΠΈΠ½ΡΠΎΠ½
Naomi Atkinson Design - Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ²Π»Π΅ΡΠ΅Π½Π½Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½-ΡΡΡΠ΄ΠΈΡ ΠΈΠ· ΠΠ΅Π»ΠΈΠΊΠΎΠ±ΡΠΈΡΠ°Π½ΠΈΠΈ, ΠΈΠΌΠ΅ΡΡΠ°Ρ ΠΏΠ»ΠΎΡΠ½ΠΎ ΡΠΏΠ°ΠΊΠΎΠ²Π°Π½Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ. ΠΠΎΠΌΠ°Π½Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΡΠ°Π·Π±Π°Π²Π»Π΅Π½Π½ΡΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π°:
- ΠΊΡΠ°ΡΠΊΠΎ, Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅;
- ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π·ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ;
- ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠΉ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ.
Π ΡΠΎΠΌΡ ΠΆΠ΅ ΡΠ°ΠΊΡΡ ββΠ²Π΅ΡΡΡΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ, ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΎ Π²Π΅ΡΡΠΌΠ° Π²ΡΠ³ΠΎΠ΄Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΠ΅Π½ Π₯Π°Π½Π΄Π·ΠΎ
ΠΡΠΈ Π²Π·Π³Π»ΡΠ΄Π΅ Π½Π° ΡΠ°ΠΉΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠ½ΠΎ, ΡΡΠΎ Ρ ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°Π½ Π½Π° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΡ . ΠΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° Π΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ; Π½Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠΉ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π΅. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π²ΡΠ΅ Π½Π΅ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡΠΈΠ΅ ΠΏΡΠΈ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΊ ΡΠΊΡΠ°Π½Π°ΠΌ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΡΠΈΠ½ΠΎΡΠΈΡ ΠΏΠΎΠ»ΡΠ·Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΡ, Π½ΠΎ ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ, Π΄Π°Π²Π°Ρ ΠΈΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΡΡΡΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΠΌΠΈ, Π³Π΄Π΅ Π±Ρ ΠΎΠ½ΠΈ Π½ΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅Ρ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS3
ΠΠ°ΠΊ Π²Ρ ΡΠΆΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π΅Π±-ΡΠ°ΠΉΡ Π² Π½Π°ΡΠ΅ΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΠΉΡΠ°Ρ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Ρ ΡΡΠ΅Π΄ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠΈΠ»ΠΈ ΠΈ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠ° Π·Π΄Π΅ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠΌΠΈΡΠΈΠ²Π½Ρ, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΠΈΠ·ΡΠΌΠΈΠ½ΠΊΠΈ; Π³ΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠ³ΡΠ°Π΅Ρ ΡΠΎΠ»Ρ ΠΏΡΠΎΡΠ½ΠΎΠΉ ΠΎΡΠ½ΠΎΠ²Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π·Π΄Π΅ΡΡ Π½Π°ΡΡΠΎΡΡΠ°Ρ Π·Π²Π΅Π·Π΄Π°. ΠΠ΅Π±-ΡΠ°ΠΉΡ ΡΠ»ΡΠΆΠΈΡ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΡΠΌΡΠ»ΠΈΡΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠΉ Π΄Π΅Π³ΡΠ°Π΄Π°ΡΠΈΠΈ Π΄Π»Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ 4-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°.
Nordic Ruby Conference
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ Nordic Ruby Conference Π΄Π°Π΅Ρ ΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΡΠΈ ΡΡΠΎ-ΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅. Π’Π°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΊΠ°ΠΊ:
- ΡΠΈΡΡΡΠΉ ΠΎΠ±ΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½;
- ΠΎΠ΄Π½ΠΎΡΠΎΠ½Π½ΡΡ ΡΠ΅ΠΊΡΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΎΠ½ΠΎΠ²;
- Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°;
- ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½Π°Ρ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°;
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΈΡΡΠ½ΡΡ ΠΈ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ Π°ΡΠΌΠΎΡΡΠ΅ΡΡ. ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Ρ, Π΄Π΅Π»Π°Π΅Ρ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ ΠΌΠ΅ΡΠΎΠΏΡΠΈΡΡΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ Π΄Π»Ρ ΡΠΈΡΠΎΠΊΠΎΠ³ΠΎ ΠΊΡΡΠ³Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.
Halifax Game Jam
Halifax Game Jam ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ ΠΌΠΎΡΠ½ΠΎΠΉ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π°ΡΠΌΠΎΡΡΠ΅ΡΠΎΠΉ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ ΡΠ»Π°Π΅ΡΠ°ΠΌΠΈ, Ρ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΌΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡΠΌΠΈ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈΠ· ΡΠΎΠ»ΠΏΡ, Π½ΠΎ ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π²Π΅Π±-ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠΎΠ±Π»ΡΠ΄Π΅Π½Ρ? ΠΠΎΠΌΠ°Π½Π΄Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±Π΄ΡΠΌΠ°Π»Π° ΡΡΠΎ ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»Π° ΡΠ°ΠΉΡΡ:
- ΡΠ²Π΅ΡΠ΄Π°Ρ ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΡ;
- ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Π²Π΅ΡΡΡΠΊΠ°;
- ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎΠ΄ Π±ΡΠ°ΡΠ·Π΅ΡΡ.
Π΄Π°ΠΆΠ΅ Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π½Π΅Π³ΠΎ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°.
Diablo Media
ΠΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΡΠΎΠ·Π΄Π°Π»Π° Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΡΡΠ΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠΈΡ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΠΉ. Π’Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ
- Π·ΠΎΠ½Π° Π³Π΅ΡΠΎΡ, Π²ΡΡΡΠ΅ΡΠ°ΡΡΠ°Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²;
- ΡΠ³Π»Π°ΠΆΠΈΠ²Π°ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²;
- Π²ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ;
- ΠΏΠ»ΠΎΡΠΊΠ°Ρ Π³ΡΠ°ΡΠΈΠΊΠ°.
ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΠΏΡΡΡΠΈΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ½Π°Π±Π΄ΠΈΡΡ Π΅Π³ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ Π±Π»Π°Π³ΠΎΠΏΠΎΠ»ΡΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π² ΠΊΠΎΠ½ΠΊΡΡΠ΅Π½ΡΠ½ΠΎΠΌ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
ASU ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ
ASU Online Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π΅Π·Π°Π±ΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ΅Π±-ΡΠ°ΠΉΡ, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΠΉ ΠΌΠ΅ΡΡΠ½ΠΎΠΌΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠΈΡΠ΅ΡΡ, ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΊΡΠΎΠΌΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡΠΎΡΡΠΉ, ΠΊΡΡΠ°ΡΠΈ, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΌΠΈΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ°. ΠΠ° ΠΏΠ΅ΡΠ²ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π²ΡΠ΅, ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ Ρ Π·Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ.
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ, ΡΠ°ΠΉΡ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠ°ΠΊ:
- ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ;
- seo ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ;
- ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ.
3200 Π’ΠΈΠ³ΡΠ΅Ρ
ΠΠΎΠ³Π΄Π° Π²Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° - ΠΏΡΠΎΠΈΠ½ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ± ΠΎΡΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠ΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠΎΠ½Π΄Π° ΠΏΡΠΎΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ. WWF, ΠΊΠ°ΠΊ Π½ΠΈΠΊΡΠΎ Π΄ΡΡΠ³ΠΎΠΉ, Π·Π½Π°Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΈΠ³ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ 3200 Tigres (ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ²) ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ ΡΠ°ΠΊΠΈΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ:
- ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΏΠ»ΠΎΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½;
- ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ;
- ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ.
Kings Hill Cars
Kings Hill Cars - ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΠ΅ΠΉ ΡΡΠ»ΡΠ³ΠΈ ΡΠ°ΠΊΡΠΈ.Π¦Π΅Π»Π΅Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΡΠ°Π΅ΡΡΡ ΠΎΡ Π²Π°ΡΠΈΡΡ Π²ΡΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ².
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ° ΡΡΡΠ°ΡΠ΅Π» ΠΈ Π½ΠΈΡΠ΅ΠΌ Π½Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΡΠ΅Π»Π΅Π½, ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ. Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΠΈ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΡΡΡ ΡΠ΅Π»Π΅Π²Π°Ρ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΡ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ ΠΈΠ· ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.
8 Π»ΠΈΡ
8 Faces - ΡΡΠΎ ΠΏΠ΅ΡΠ°ΡΠ½ΡΠΉ ΠΆΡΡΠ½Π°Π», ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΈΡ ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ ΡΠ°Π·ΠΌΡΡΠ»ΡΡΡ ΠΎ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ΅, Π·Π°Π΄Π°Π²Π°Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½, Π½ΠΎ Ρ ΠΈΡΡΡΠΉ Π²ΠΎΠΏΡΠΎΡ: Β«ΠΡΠ»ΠΈ Π±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅Π³ΠΎ Π²ΠΎΡΠ΅ΠΌΡ Π³Π°ΡΠ½ΠΈΡΡΡ, ΡΡΠΎ Π±Ρ Π²Ρ Π²ΡΠ±ΡΠ°Π»ΠΈ?Β»
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ, ΠΊΠ°ΠΊ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ, Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ
- ΡΠΈΡΡΡΠΉ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½;
- ΡΠΈΡΠΎΠΊΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ;
- ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ ΠΈΠ·ΡΡΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° ΠΌΠ΅Π½ΡΡΠΈΠ΅ ΡΠΊΡΠ°Π½Ρ.
Asbury Agile
Asbury Agile - ΠΊΠΎΠ½ΡΠ΅ΡΠ΅Π½ΡΠΈΡ Π΄Π»Ρ Π²Π΅Π±-ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΠΎΠ². ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅ΡΠΎΠΏΡΠΈΡΡΠΈΠ΅ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π²Π΅Π±-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π²ΡΡΠΎΠΊΠΎΠΊΠ»Π°ΡΡΠ½ΡΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΠΎΠ², ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΈ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ, Π½ΠΎ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΡΡΡΠΎΠ³ΠΈΠΌ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ
- seo Π΄ΡΡΠΆΠ΅Π»ΡΠ±ΠΈΠ΅;
- ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ;
- ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΊΠ°ΠΊ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ Asbury Agile.
ΠΠ»ΡΠ·Π°ΠΊΡΠ΅Π°ΡΠΈΠΈ
AlsacrΓ©ations - ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΎΠ΅ Π²Π΅Π±-Π°Π³Π΅Π½ΡΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π³ΡΠ»ΡΡΠ½ΠΎΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
Π₯ΠΎΡΡ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΆΠ°ΠΆΠ΄Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Β«ΡΠ΅ΠΉΡΠ»ΠΈΡΡΠΈΠ½Π³Π°Β», ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΠΏΡΠΈΡΠ΅Π» ΠΈΠ· ΠΏΡΠΎΡΠ»ΠΎΠ³ΠΎ Ρ Π΅Π³ΠΎ Π³Π»ΡΠ½ΡΠ΅Π²ΡΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°ΠΌΠΈ Ρ ΡΠ΅Π½ΡΠΌΠΈ, ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Ρ Π½Π΅Π³ΠΎ Π΅ΡΡΡ ΠΎΠ΄Π½ΠΎ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ; ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ Π½Π΅ΠΉ, Π·Π°ΡΡΠ°Π²Π»ΡΡ Π½Π°Ρ (Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠΎΠ²) ΠΏΠΎΠ²Π΅ΡΠΈΡΡ, ΡΡΠΎ Ρ ΠΎΡΡ Π±Ρ Π±Π°Π·Π° Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΠΈΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ.
Sleepstreet
Sleepstreet - ΡΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π΄ΡΠ΅Ρ Π³Π»Π°Π·, Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΠ΅Π»Π΅ΡΠΎΠ½Π΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡ Π²Π°ΡΡΠ°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠ°ΠΊ
- ΠΌΠ°ΠΊΠ΅Ρ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π°ΡΠ΅Π½Π΄Ρ;
- Π² ΡΡΠΈΠ»Π΅ ΡΠ΅ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΠΏΠ»ΠΎΠΉ ΠΈ ΡΡΡΠ½ΠΎΠΉ Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ Π°ΡΠΌΠΎΡΡΠ΅ΡΡ;
- - ΠΌΠ½ΠΎΠ³ΠΎΡΠ·ΡΡΠ½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π΄Π»Ρ ΡΠΈΡΠΎΠΊΠΎΠ³ΠΎ ΠΊΡΡΠ³Π° ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ².
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π°ΡΠΏΠ΅ΠΊΡΠΎΠ².ΠΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ - ΡΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠΎΠ², Π½ΠΎ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΠ³ΡΠΎΠΌΠ½ΡΡ ΡΠΊΡΠ°Π½Π°Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ². ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΡΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ; ΠΠ°ΠΆΠ΄ΡΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, Π±ΡΠ΄Ρ ΡΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ Ρ ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊΠ° ΠΈΠ»ΠΈ ΠΎΠ±ΡΡΠ½Π°Ρ ΡΠΊΠΎΠ»ΡΠ½Π°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡΡΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠΊΡΠ°Π½Π°. Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΌΡ Π·Π΄Π΅ΡΡ Π½Π΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ»ΠΈΠ²Π°ΡΡ ΡΠ²Π΅Ρ Π½Π° ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ; ΠΌΡ ΠΏΡΠΎΡΡΠΎ Ρ ΠΎΡΠΈΠΌ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, Π½Π°Π²ΠΎΠ΄Π½ΡΡΡΠΈΠ΅ ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ, ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²ΡΠ³ΠΎΠ΄Ρ ΠΎΡ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠ°Π²ΠΈΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Ρ ΡΠΈΡΠ°Π΅ΡΠ΅? ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½Π°ΡΠΈ Π³Π»Π°Π²Π½ΡΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ | Π¦Π΅Π½ΡΡ ΠΏΠΎΠΈΡΠΊΠ° Google | Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Google
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ - ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ΅ΡΠ²Π΅Ρ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ HTML-ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π£ΡΡΡΠΎΠΉΡΡΠ²ΠΎ. ΠΠ»Π³ΠΎΡΠΈΡΠΌΡ Google Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ, Π΅ΡΠ»ΠΈ Π²ΡΠ΅ ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π°Π³Π΅Π½ΡΡ ΡΠΎΠ±ΠΎΡΠ° Googlebot ΠΌΠΎΠ³ΡΡ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π΅Π΅ ΡΠ΅ΡΡΡΡΡ (CSS, JavaScript ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π Π°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°.TL; DR
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΌΠ΅ΡΠ°ΡΠ΅Π³
name = "viewport"
, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. - ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΌ. Π ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΡΠ½ΠΎΠ²Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°Β».
Π§ΡΠΎΠ±Ρ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ, ΡΡΠΎ Π²Π°ΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°:
Π’Π΅Π³ meta viewport Π΄Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΡΡΠ΅Π³ΡΠ»ΠΈΡΡΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π± ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ³Π΄Π° ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ meta viewport, ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° (ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠΊΠΎΠ»ΠΎ 980 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Ρ ΠΎΡΡ ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²). ΠΠ°ΡΠ΅ΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΡΠ°ΡΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠ° ΠΈ Π»ΠΈΠ±ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°, Π»ΠΈΠ±ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠΎΠ² ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²ΠΈΠ΄, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ ΠΊΠ°ΡΠ°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ°Π»ΡΡΠ΅ΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Google, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π΅ ΠΎΡΠ΅Π½ΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ.
Π‘Π»Π΅Π²Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΠ°-ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° - ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΠΏΠΎΡΡΠΎΠΌΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°, Π΄Π΅Π»Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΡΡΠ΄Π½ΡΠΌ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ.Π‘ΠΏΡΠ°Π²Π° ΡΠ° ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ° Ρ ΠΎΠΊΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° - ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎ. ΠΠ»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π΅ΡΠ»ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π½Π΅Π΄Π°Π²Π½Π΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠ°ΠΊΠΎΠΌ ΠΊΠ°ΠΊ Google Chrome ΠΈΠ»ΠΈ Apple Mobile Safari, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π½Π°ΡΠΈΠΌΠΈ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°ΠΌΠΈ.
ΠΠΎΡΠ΅ΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ:
- ΠΠ±Π»Π΅Π³ΡΠ°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π΄Π΅Π»ΠΈΡΡΡΡ Π²Π°ΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΠΈ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° Π½Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ URL.
- ΠΠΎΠΌΠΎΠ³Π°Π΅Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°ΠΌ Google ΡΠΎΡΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΠ½Π΄Π΅ΠΊΡΠ°ΡΠΈΠΈ. Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΈΠ³Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΎ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ / ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
- Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠ°Π½ΠΈΡ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈ ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ.
- Π‘Π½ΠΈΠΆΠ°Π΅Ρ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ ΡΠΈΠΏΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, Π²Π»ΠΈΡΡΡΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΡΡ.
- ΠΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠΊΡΠ°ΡΠ°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π°Π³Π΅Π½ΡΠ° ΠΏΠΎΠ΄Π²Π΅ΡΠΆΠ΅Π½ΠΎ ΠΎΡΠΈΠ±ΠΊΠ°ΠΌ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΡ ΡΠ΄ΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° (ΡΠΌ. ΠΠΎΠ΄Π²ΠΎΠ΄Π½ΡΠ΅ ΠΊΠ°ΠΌΠ½ΠΈ ΠΏΡΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ Π°Π³Π΅Π½ΡΠΎΠ² ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅).
- Π‘ΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ΅ΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ±ΠΎΡ Googlebot ΡΠΊΠ°Π½ΠΈΡΡΠ΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ. ΠΠ»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΡΡΠ°Π½ΠΈΡ, ΠΎΠ΄Π½ΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ Π°Π³Π΅Π½ΡΡ ΡΠΎΠ±ΠΎΡΠ° Googlebot Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· ΡΠ°Π·Π½ΡΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌΠΈ Π°Π³Π΅Π½ΡΠ°ΠΌΠΈ Googlebot, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠΎ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΊΠΎΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠΌΠΎΡΡ Google ΠΏΡΠΎΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π΅Π³ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ²Π΅ΠΆΠΈΠΉ.
ΠΡΠ»ΠΈ Π²Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, Π½Π°ΡΠ½ΠΈΡΠ΅ Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π² Π±Π»ΠΎΠ³Π΅ Π² Π±Π»ΠΎΠ³Π΅ Π¦Π΅Π½ΡΡΠ° ΠΏΠΎΠΈΡΠΊΠ° Google ΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ ΡΠ°ΠΉΡ ΠΡΠ½ΠΎΠ²Ρ Π²Π΅Π±-ΠΏΠΎΠΈΡΠΊΠ°.
ΠΠ°ΠΆΠ½ΠΎ: Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π½Π΅ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π»ΡΠ±ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ (CSS, JavaScript ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ) Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΎΠ±ΠΎΡΠ° Google Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ robots.txt ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ². ΠΡΡΡ ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌ ΠΏΠΎΠ»Π½ΡΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΡΠΈΠΌ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΡΠ°ΠΉΠ»Π°ΠΌ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π½Π°ΡΠΈΠΌ Π°Π»Π³ΠΎΡΠΈΡΠΌΠ°ΠΌ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅ΡΡ ΠΊ Π½Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π§ΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°ΡΠ° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠΏΠ΅ΡΠ½Π°, ΠΈΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΡΠΈΠΏΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ.JavaScript
ΠΠ΄Π½Π° ΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ², ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΡΡΠ΅Π±ΡΠ΅Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ - ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ JavaScript Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ°ΠΉΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .Π’ΠΈΠΏΠΈΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΎΠΏΠΈΡΠ°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript ΠΈ ΡΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ Google ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ±ΡΠΈΠ΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ
Π’ΡΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ JavaScript Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ², ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²:
- JavaScript-Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ : Π² ΡΡΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π²ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½Ρ HTML, CSS ΠΈ JavaScript.ΠΠΎΠ³Π΄Π° JavaScript Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π½Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°. ΠΡΠ»ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΡΠ΅Π±ΡΠ΅Ρ JavaScript, ΡΡΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠ°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Google .
- ΠΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ : Π ΡΡΠΎΠΉ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΠ±Π° JavaScript ΠΈ ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° ΡΠ°Π·Π½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
- ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΉ JavaScript : Π² ΡΡΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π²ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΡ ΠΆΠ΅ HTML, Π½ΠΎ JavaScript ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Ρ URL-Π°Π΄ΡΠ΅ΡΠ°, Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄ JavaScript Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· ΡΡΠΈΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΉ.
JavaScript-Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ
Π ΡΡΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ URL-Π°Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (HTML, CSS, JavaScript, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅) Π½Π° Π²ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. Π’ΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ³Π΄Π° Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ JavaScript, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΈΠ»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°. ΠΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π²Π΅Π± Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ,ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ URL-Π°Π΄ΡΠ΅Ρ,ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ JavaScript.ΠΡΠ΅
ΡΡΡΡΠΎΠΉΡΡΠ²Π°,Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°ΡΡΠΈΠ΅ URL-Π°Π΄ΡΠ΅Ρ JavaScript,ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠ΄.ΠΡΠΈ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ
JavaScript ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈ ΡΠ΅ΡΠ°Π΅Ρ ΡΡΠΎ-ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅,Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ
Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΌΠ°ΡΡΡΠΎΠ½Π° ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠ΄ Π²ΠΌΠ΅ΡΡΠΎ
Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ.
ΠΡΠ° ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΎΡΠ΅Π½Ρ ΡΠ΅ΡΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½Π° Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ Π½Π°ΡΠΈΠΌ
Π°Π»Π³ΠΎΡΠΈΡΠΌΡ ΠΌΠΎΠ³ΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ,ΡΡΠ° ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π΄Π΅Π»Π°Π΅Ρ
Π½Π΅ ΡΡΠ΅Π±ΡΡΡΡΡ HTTP-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊVary
,ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ URL-Π°Π΄ΡΠ΅ΡΠ°
ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈ Π΅Π΅ ΡΠ΅ΡΡΡΡΡ Π½Π΅ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ.ΠΠ·-Π·Π° ΡΡΠΈΡ
ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°,Π΅ΡΠ»ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript,ΡΡΠΎ Π½Π°ΡΠ°
ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠ°Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ.
ΠΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅
ΠΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅-ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ°,Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ΅ΡΠ²Π΅Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΠ°Π½Π΄Π΅ΠΌΠ΅ Ρ JavaScript.Π½Π° ΠΊΠ»ΠΈΠ΅Π½ΡΠ΅,ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ,ΡΠ»ΡΠΆΠΈΠ».
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π±ΡΠ΄Ρ ΡΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΠΌΠ°ΡΡΡΠΎΠ½.Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ JavaScript,ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°,ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΠ΅ΠΌ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Π² ΡΠ΅ΡΠ²Π΅Ρ,ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΊΠΎΠ΄,ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ.ΠΠ±ΡΡΠ½ΠΎ JavaScript ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π² ΡΠ°ΠΉΠ»Π΅ cookie,ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΡΠ²Π΅Ρ ΡΠΈΡΠ°Π΅Ρ ΠΏΡΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΈΡΡ Ρ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
Π£ΡΠΈΡΡΠ²Π°Ρ,ΡΡΠΎ ΡΠ΅ΡΠ²Π΅Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ HTML-ΠΊΠΎΠ΄Ρ ΡΠ°Π·Π½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ Π°Π³Π΅Π½ΡΠ°ΠΌ,Π²ΠΌΠ΅ΡΡΠ΅ Π²Π·ΡΡΡΠ΅
ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΠΈΠΏΠΎΠΌ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ.ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ
ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΠΏΠΈΡΠ°Π½Ρ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ,Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΊΡΠ°ΡΠΊΠΎ ΠΏΠΎΠ΄Π²Π΅ΡΡΠΈ ΠΈΡΠΎΠ³,Π²Π΅Π±-ΡΠ°ΠΉΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ HTTP-ΠΎΡΠ²Π΅ΡΠ°Vary:User-agent
ΠΊΠΎΠ³Π΄Π° URL-Π°Π΄ΡΠ΅Ρ,ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π½ΡΠΉ HTML-ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
Π°Π³Π΅Π½ΡΠΎΠ²,ΠΏΡΠΎΡΠΈΠ».
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΉ JavaScript
Π ΡΡΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ HTML-ΠΊΠΎΠ΄,ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅ΡΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΡΠ°ΠΉΠ»Π° JavaScript,ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ
ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π°Π³Π΅Π½ΡΠ°.ΠΡΠΎ
ΠΠΎΠ΄ JavaScript ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ.
Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ» JavaScript ΡVary:HTTP-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π°Π³Π΅Π½ΡΠ°
.