Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ «@ media screen and (orientation:landscape) » ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²?
ΠΠ΅Π΄Π°Π²Π½ΠΎ Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ» ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π° ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π΄Π΅Π»Π°Ρ, Π½ΠΎ Ρ ΠΎΡΠ΅Π» Π±Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠ² ΠΈ, ΠΊ ΠΌΠΎΠ΅ΠΌΡ ΡΠ΄ΠΈΠ²Π»Π΅Π½ΠΈΡ, Π±ΡΠ»ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ². ΠΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π·Π½Π°Π΅Ρ, Π΅ΡΡΡ Π»ΠΈ Ρ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ΅ΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠΎΠ²ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½?
CSS
@media screen and (orientation:landscape) {
width: 100%;
overflow: hidden;
}
css
mobile
responsive-design
media-queries
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
ΠΡΡΠΎΡΠ½ΠΈΠΊ
cristiano matos Β Β
06 Π΄Π΅ΠΊΠ°Π±ΡΡ 2013 Π² 14:31
3 ΠΎΡΠ²Π΅ΡΠ°
2
ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ. Π’ΠΎΠ³Π΄Π° ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΡΠΎΠ»ΡΠΊΠΎ Π² Π»Π°Π½Π΄ΡΠ°ΡΡΠ΅. (ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠΊΡΠ°Π½ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½ΠΎ ΠΊΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ Π² windows ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°)
@media screen and (orientation:landscape) and (max-width:480px) {
width: 100%;
overflow: hidden;
}
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Michael Tempest Β Β
06 Π΄Π΅ΠΊΠ°Π±ΡΡ 2013 Π² 14:36
1
Π― Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠ²Π΅ΡΠ΅Π½, ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, Π½ΠΎ, ΠΏΠΎΡ
ΠΎΠΆΠ΅, ΠΎΠ½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π°. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π΄ΠΈΡΠΏΠ»Π΅Ρ Π½Π° http://jsfiddle.net/fkyBA/ , ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠΎΠ½ ΠΊΡΠ°ΡΠ½ΡΠΉ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΡΡΠΈΠ»Π΅, Π½ΠΎ Π½Π΅ Π² Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΌ ΡΡΠΈΠ»Π΅. Π― Π±Ρ ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎ ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ orientation:portrait
, Π΅ΡΠ»ΠΈ Ρ
ΠΎΡΠΈΡΠ΅, Π½ΠΎ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ.
Π― Π±Ρ ΡΠΊΠΎΡΠ΅Π΅ ΠΏΡΠΈΠ½ΡΠ» ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ ΡΠΎΠΏΡΠΎΡΠΈΠ²Π»ΡΠ»ΡΡ Π΅ΠΌΡ. ΠΡΠ»ΠΈ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΅ΡΡΡ ΡΠΎΠ½ΠΊΠΎΠ΅, Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π΅ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΡΠΎΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Explosion Pills Β Β
06 Π΄Π΅ΠΊΠ°Π±ΡΡ 2013 Π² 14:42
1
Π§ΡΠΎΠ±Ρ ΠΎΡΠ²Π΅ΡΠΈΡΡ ΠΏΡΡΠΌΠΎ: Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ²Π½ΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ css
Π ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈ ΡΠΊΡΠ°Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΌΠΈ, ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ ΡΡΡΠ΄Π½Π΅Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°Π·Π½ΠΈΡΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΄Π°ΠΆΠ΅ Ρ javascript.
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΡΠΌΠ°ΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²ΠΈΠ΄ΠΎΠ²ΠΎΠΉ ΡΠΊΡΠ°Π½ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, Π° Π½Π΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ. ΠΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΡΡΠΎΠ», ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ Π²Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΡΠ°ΡΡΡΡ Π²ΡΡΠ°ΡΡ Π½Π° ΠΈΡ ΠΏΡΡΠΈ, ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΡΠ΅ΡΠ΄Π½ΠΎ ΠΏΡΡΠ°ΡΡΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ ΡΡΠΎ.
ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°ΠΏΡΠΎΡΡ max-width ΠΈ max-height Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ Π½Π΅ ΡΠΎΠΊΡΡΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΈ ΡΡΠΈΠ»ΠΈ Π½Π° ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ «mobile or desktop», Π½ΠΎ: «Ρ ΠΎΡΠΎΡΠΎ Π»ΠΈ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅/ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ?»
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΠ΅ΡΠ΅ ΡΡΠΎΠΌΡ ΡΠΎΠ²Π΅ΡΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ±Π»Π°Π³ΠΎΠ΄Π°ΡΡΡ Π²Π°Ρ, Π΅ΡΠ»ΠΈ Ρ Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅ (ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠΆΠΈΠ»ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ½ΠΈΠΆΠ°ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°.)
EDIT: ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ REALLY Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΎ-ΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ modernizr ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Tim Seguine Β Β
06 Π΄Π΅ΠΊΠ°Π±ΡΡ 2013 Π² 14:48
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
css ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ², Π½ΠΎ Π½Π΅ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ipad
ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ css ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΈΡΠΊΠ»ΡΡΠ°Ρ ipad ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ? @media only screen and (min-width: 742px) and (max-width: 769px){ #element{…
Π·Π°ΠΏΡΠΎΡ min-width CSS Media Π² IE8+
Π― ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΠ·ΠΎΠ²Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² CSS Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ iPad. ΠΠ»Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ <link rel=stylesheet media=only screen and (min-width:1000px)…
ΠΠ°Π΄Π΅ΠΆΠ½ΡΠΉ Π·Π°ΠΏΡΠΎΡ media Π΄Π»Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ iPad (ΠΈΠ»ΠΈ Π² Π»ΡΡΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ 1024×768 ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²)
Π― ΡΠΆΠ΅ ΠΏΡΠΎΡΠΈΡΠ°Π» ΠΏΠΎΡΡΠΈ Π²ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ stackoverflow, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, Π½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Ρ ΠΎΠΆΠΈΠ΄Π°Π». ΠΠ½Π΅ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ iPad (ΠΈΠ»ΠΈ Π² Π»ΡΡΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅…
Java IDE Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²
Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² java. Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΎΠΏΡΡ ΡΠ°Π±ΠΎΡΡ Ρ eclipse IDE Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. Π’Π΅ΠΏΠ΅ΡΡ ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ², Π΄ΠΎΠ»ΠΆΠ΅Π½ Π»ΠΈ Ρ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ eclipse ΠΈΠ»ΠΈ Netbeans….
ΠΡΠ΅ Π»ΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΡ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²/Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Ρ Π½Π° Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π° ΡΠ°ΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΊΠ°ΠΊ iPad?
ΠΡΠ΅ Π»ΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΡ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²/Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Ρ Π½Π° Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π° ΡΠ°ΠΊΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΊΠ°ΠΊ iPad? ΠΡΡΡ Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ ΡΠ°Π·Π½ΠΈΡΠ°? body {background:red} @media only screen…
@media Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΊΡΠΎΠΌΠ΅ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΠ
ΠΡΡΡ Π»ΠΈ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΏΡΠΎΡΠΈΡΡ css-@media Π΄Π»Ρ ALL ΠΊΠ°ΡΠΌΠ°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²/ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ² Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² (ΡΠΈΡΠΈΠ½Π°, Π²ΡΡΠΎΡΠ°). Π― Π·Π½Π°Ρ, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ @handheld. Π― ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» ΡΡΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ :…
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ media Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²?
Π― Π·Π½Π°Ρ, ΡΡΠΎ ΡΠ°ΠΊΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ Π·Π°Π΄Π°Π²Π°Π»ΠΈΡΡ ΠΈ ΡΠ°Π½ΡΡΠ΅, Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π» ΠΈΡ , Π½ΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π΅ ΠΌΠΎΠ³ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΡΡΡΡ Π½Π° ΡΡΠΎΠΌ. ΠΠΎΡ Π² ΡΠ΅ΠΌ ΠΌΠΎΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°: Π― Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ½Π΄Π΅ΠΊΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° Π²…
Π²ΡΠ·ΠΎΠ² javascript ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° ΡΡΠ½ΠΊΡΠΈΠΉ media
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π±Π»ΠΎΠΊ media Π·Π°ΠΏΡΠΎΡΠ° css Π΄Π»Ρ ipad @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² @media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½ ΠΈ…
CSS Media Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ²
ΠΠ΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°: www.mathias-syversen.net ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΡΠΎ ΠΌΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΠΎΡΡ, ΡΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄ΡΡΠ΅ Π΄ΠΎΠ±ΡΡ! Π― ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π΄ΡΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ @media Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ…
IE11 @media Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ
ΠΠ»Ρ IE11 Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π°ΠΏΡΠΎΡ @media: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active){} Π ΡΡΠΎ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Ρ Ρ ΠΎΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ 3 ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ…
CSS — orientation — orientation CSS , ΡΡΠ½ΠΊΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π° Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
orientation
CSS , ΡΡΠ½ΠΊΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π° Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π° (ΠΈΠ»ΠΈ ΠΏΠΎΠ»Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ
Π‘ΠΠ ).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° . ΠΡΠΊΡΡΡΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΠ°Π½Π΅Ρ ΡΠΈΡΠ΅, ΡΠ΅ΠΌ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π²ΡΡΠΎΠΊΠΎΠΉ, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ.
Syntax
Π€ΡΠ½ΠΊΡΠΈΡ orientation
ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°, Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π½ΠΈΠΆΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ²
portrait
- ΠΠΈΠ΄ΠΎΠ²ΠΎΠΉ ΡΠΊΡΠ°Π½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ,Ρ.Π΅.Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅.
landscape
- ΠΠΈΠ΄ΠΎΠ²ΠΎΠΉ ΡΠΊΡΠ°Π½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ,Ρ.Π΅.ΡΠΈΡΠΈΠ½Π° Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ.
Examples
HTML
<div>Box 1</div> <div>Box 2</div> <div>Box 3</div>
CSS
body { display: flex; } div { background: yellow; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } }
Result
Specifications
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Π₯ΡΠΎΠΌΠΎΠ²ΡΠΉ Android | Firefox Π΄Π»Ρ Android | ΠΠΏΠ΅ΡΠ° ΠΠ½Π΄ΡΠΎΠΈΠ΄ | Safari Π½Π° IOS | Samsung ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ | |
orientation | 3 | 12 | 2 | 9 | 10.6 | 5 | β€37 | 18 | 4 | 11 | 4.2 | 1.0 |
translated-content/index.html at main Β· mdn/translated-content Β· GitHub
translated-content/index.html at main Β· mdn/translated-content Β· GitHub
Permalink
Β
Cannot retrieve contributors at this time
— | |
title: ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ | |
slug: Web/CSS/@media/orientation | |
translation_of: Web/CSS/@media/orientation | |
— | |
<div>{{cssref}}</div> | |
<p><a href=»/en-US/docs/CSS»>CSS</a> <a href=»/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features»>ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΈ</a>Β <strong><code>orientation</code></strong> ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ {{glossary(«ΠΏΡΠΎΡΠΌΠΎΡΡΠ°»)}} (ΠΈΠ»ΠΈ ΠΏΠΎΠ»Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ <a href=»/en-US/docs/Web/CSS/Paged_media»>ΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡ</a>).</p> | |
<div> | |
<p><strong>ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅:</strong>Β ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈΒ <em>ΡΡΡΡΠΎΠΉΡΡΠ²Π°</em>. ΠΡΠΊΡΡΡΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π² ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΡΠΈΠ²Π΅Π΄ΡΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΠ°Π½Π΅Ρ ΡΠΈΡΠ΅, ΡΠ΅ΠΌ Π²ΡΡΠΎΠΊΠ°Ρ, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ.</p> | |
</div> | |
<h3>Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ</h3> | |
<p>Π€ΡΠ½ΠΊΡΠΈΡΒ <code>orientation</code>Β ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°, Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π½ΠΈΠΆΠ΅.</p> | |
<h4>ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ²</h4> | |
<dl> | |
<dt><code>portrait</code></dt> | |
<dd>ΠΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠΎ Π΅ΡΡΡ Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅.</dd> | |
<dt><code>landscape</code></dt> | |
<dd>ΠΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠΎ Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ.</dd> | |
</dl> | |
<h3>ΠΡΠΈΠΌΠ΅Ρ</h3> | |
<h4>HTML</h4> | |
<pre><div>ΠΡΡΠ°Π²ΠΊΠ° 1</div> | |
<div>ΠΡΡΠ°Π²ΠΊΠ° 2</div> | |
<div>ΠΡΡΠ°Π²ΠΊΠ° 3</div> | |
</pre> | |
<h4>CSS</h4> | |
<pre>body { | |
display: flex; | |
} | |
div { | |
Β background: yellow; | |
} | |
@media (orientation: landscape) { | |
body { | |
flex-direction: row; | |
} | |
} | |
@media (orientation: portrait) { | |
body { | |
flex-direction: column; | |
} | |
}</pre> | |
<h4>Π Π΅Π·ΡΠ»ΡΡΠ°Ρ</h4> | |
<p>{{EmbedLiveSample(«Example»)}}</p> | |
<h3>Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ</h3> | |
<table> | |
<thead> | |
<tr> | |
<th scope=»col»>Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ</th> | |
<th scope=»col»>Π‘ΡΠ°ΡΡΡ</th> | |
<th scope=»col»>ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>{{SpecName(‘CSS4 Media Queries’, ‘#orientation’, ‘orientation’)}}</td> | |
<td>{{Spec2(‘CSS4 Media Queries’)}}</td> | |
<td>ΠΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.</td> | |
</tr> | |
<tr> | |
<td>{{SpecName(‘CSS3 Media Queries’, ‘#orientation’, ‘orientation’)}}</td> | |
<td>{{Spec2(‘CSS3 Media Queries’)}}</td> | |
<td>ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅.</td> | |
</tr> | |
</tbody> | |
</table> | |
<h3>Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²</h3> | |
<p>{{Compat(«css.at-rules.media.orientation»)}}</p> |
You canβt perform that action at this time.
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
Π£ΡΠ»ΠΎΠ²ΠΈΡ CSS Π΄Π»Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΊΡΠ°Π½Π°
Π ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±ΠΎΠ»ΡΡΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ° Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
: ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°Ρ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°, ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ
, ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ
ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ Π²ΡΡ
ΠΎΠ΄ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ.
ΠΠΎ Π½Π΅Π΄Π°Π²Π½Π΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠ°ΠΌ ΡΠ°ΠΉΡΠΎΠ² ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ Π±ΠΎΡΠΎΡΡΡΡ Ρ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡΡ — ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΉΡΠ° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΏΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΡΠ°ΠΉΡΠ° Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ : Opera, Mozilla, Google Chrome ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΡΠ°ΠΊ Π½Π΅Π»ΡΠ±ΠΈΠΌΡΠΉ Π²ΡΠ΅ΠΌΠΈ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠ°ΠΌΠΈ — Internet Explorer.
Π‘ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ΠΌ Π² ΠΆΠΈΠ·Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠΈΠ·Π°ΡΠΈΠ΅ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ² ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π½ΠΎΠ²Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° — ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π°. ΠΠΎ Π½Π° ΡΠΏΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π² CSS3 ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ media queries — ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ, Π·Π°Π΄Π°Π²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π³ΡΡΠΏΠΏΡ ΡΡΡΡΠΎΠΉΡΡΠ², Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡ Π² Π‘SS3 Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΉΡ.
Π‘ΠΏΠΈΡΠΎΠΊ CSSΒ ΡΡΠ»ΠΎΠ²ΠΈΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°
/* monitors and laptops */
@media screen and (min-width: 1240px) {}
/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
/* mobile */
@media screen and (max-width: 768px) {}
/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){}
/* CSS Π΄Π»Ρ Retina ΡΡΡΡΠΎΠΉΡΡΠ² */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min—moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {/* CSS */}
ΠΠ°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠΎ ΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π±ΡΠ»Π° Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½Π° Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ Π½Π° Π²ΡΠ΅Ρ ΡΠΊΡΠ°Π½Π°Ρ ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ !
Π Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΡΡ Π·Π½Π°Π½ΠΈΠΉ Π² ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΉΡΠ°, Π΄ΠΎΠ²Π΅ΡΡΡΠ΅ ΡΡΠΎ Π΄Π΅Π»ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»Π°ΠΌ, Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΡΠ°ΠΉΡΠ° Π² Π²Π΅Π±-ΡΡΡΠ΄ΠΈΠΈ.
ΠΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅ iOS ΠΌΠ΅Π΄ΠΈΠ°-Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ°Π±ΠΎΡΠ΅, ΠΏΡΠΎΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Apple, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄Π½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ, Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΊΠΎΠ½ΠΎΠΌΡΡ ΠΊΡΡΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π»ΡΠ±ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠΈΡΡ ΠΎΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠΎ Media Queries, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΏΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΡΠ°ΠΉΡΡ.
iPhone 6 ΠΈ iPhone 6+
/* iPhone 6 ΠΠΎΡΡΡΠ΅Ρ */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { } /*iPhone 6 ΠΠ»ΡΠ±ΠΎΠΌ */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { } /*iPhone 6+ ΠΠΎΡΡΡΠ΅Ρ */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { } /*iPhone 6+ ΠΠ»ΡΠ±ΠΎΠΌ */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { } /*iPhone 6 ΠΈ iPhone 6+ ΠΠΎΡΡΡΠ΅Ρ ΠΈ ΠΠ»ΡΠ±ΠΎΠΌ */ @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ } /*iPhone 6 ΠΈ iPhone 6+ ΠΠΎΡΡΡΠ΅Ρ */ @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ } /*iPhone 6 ΠΈ iPhone 6+ ΠΠ»ΡΠ±ΠΎΠΌ */ @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ }
Retina iPad Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { // CSS Styles }
Retina iPad Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { // CSS Styles }
Retina iPad Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΈ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { // CSS Styles }
iPad Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { // CSS Styles }
iPad Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { // CSS Styles }
iPad Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΈ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { // CSS Styles }
Π‘ΡΡΠ»ΠΊΠΈ
ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅
ΠΠ΄Π½ΠΎΠΊΠ»Π°ΡΡΠ½ΠΈΠΊΠΈ
Telegram
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
CSS CSS3 HTML5 JavaScript Media Queries
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ CSS3 Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΡΠ°Π½Π°
ΠΠ»Ρ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ Π²ΠΈΠ΄Π° ΡΠ°Π±Π»ΠΎΠ½Π° Π² CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΌΠ΅Π΄ΠΈΠ° ΡΡΠ΅Π΄Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΊΡΠ°Π½ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ°ΡΡ). CSS3 ΡΠ°ΡΡΠΈΡΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΈΠΏΠΎΠ² ΠΌΠ΅Π΄ΠΈΠ° ΡΡΠ΅Π΄Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ.Β Π Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°Π±Π»ΠΎΠ½Π° ΠΈ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅ΠΌ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅.
Β
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΉ ΡΠΊΡΠ°Π½Π°. ΠΠΎΡΡΡΠΏΠ½Ρ Π΄Π²Π΅ ΠΎΠΏΡΠΈΠΈ: landscape ΠΈ portrait, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΎΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΡΠ°Π½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΡΠ°ΡΠ·Π΅Ρ ΠΈΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π°. ΠΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ — ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅ΠΆΠΈΠΌ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ. ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ — ΡΠ΅ΠΆΠΈΠΌ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ.
/* ΠΠΎΡΡΡΠ΅ΡΠ½Π°Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠ°Π±Π»ΠΎΠ½Π° */ @media screen and (orientation:portrait) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°Π±Π»ΠΎΠ½Π° */ } /* ΠΠ°Π½Π΄ΡΠ°ΡΡΠ½Π°Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠ°Π±Π»ΠΎΠ½Π°*/ @media screen and (orientation:landscape) { /* Π‘ΡΠΈΠ»ΠΈ Π΄Π»Ρ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°Π±Π»ΠΎΠ½Π° */ }
Π ΡΡΠΈΠ»ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠΎΠ·Π΄Π°Π½Ρ ΠΏΡΠ°Π²ΠΈΠ»Π°.
Β
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Ρ Ρ Π°ΠΌΠ΅Π»Π΅ΠΎΠ½ΠΎΠΌ
ΠΠ»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΎΠ·Π΄Π°Π½Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ Π°ΠΌΠ΅Π»Π΅ΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π±ΠΎΠ½ΡΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ CSS3, ΡΠΌΠ΅Π½Π° ΡΠ²Π΅ΡΠ° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ Π·Π°ΡΡΡ Π°Π½ΠΈΠ΅ΠΌ.
ΠΠ°ΠΊ ΡΡΡΡΠΎΠ΅Π½Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
html { background: #000 url(chameleon2.jpg) 50% 100% no-repeat; } body { background: url(chameleon.jpg) 50% 100% no-repeat; }
ΠΠ½Π° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄Π²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ
Π°ΠΌΠ΅Π»Π΅ΠΎΠ½Π°. ΠΠ΄Π½ΠΎ — Π΄Π»Ρ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, Π΄ΡΡΠ³ΠΎΠ΅ — Π΄Π»Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ. ΠΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ Π΄Π»Ρ ΡΠ΅Π³Π° html
, Π° Π²ΡΠΎΡΠΎΠ΅ — Π΄Π»ΡΒ ΡΠ΅Π³Π° body
.
/* ΠΠΎΡΡΡΠ΅ΡΠ½Π°Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ*/ @media screen and (orientation:portrait) { body { opacity: 1; } } /* ΠΠ°Π½Π΄ΡΠ°ΡΡΠ½Π°Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ*/ @media screen and (orientation:landscape) { body { opacity: 0; } }
ΠΠ»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ΅Π³ body
ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ 0 ΠΏΡΠΈ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ 1 ΠΏΡΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ.
Β
ΠΠ°ΡΡΡ Π°Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠΌΠ΅Π½Π΅ ΡΠ²Π΅ΡΠ°
Π Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ CSS3, ΡΠΌΠ΅Π½Π° ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°Π΅ΡΡΡ ΠΏΠ»Π°Π²Π½ΡΠΌ Π·Π°ΡΡΡ Π°Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° Ρ Π°ΠΌΠ΅Π»Π΅ΠΎΠ½Π°.
body { background: url(chameleon.jpg) 50% 100% no-repeat; -moz-transition: opacity 1s ease; /* FF3.7+ */ -o-transition: opacity 1s ease; /* Opera 10.5 */ -webkit-transition: opacity 1s ease; /* Saf3.2+, Chrome */ transition: opacity 1s ease; }
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
ΠΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ :
- Safari 4+
- Chrome 4+
- Firefox 3.5+
- Safari iPad
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ Opera 10.5 (Presto 2.5) ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ ΠΊΡΠΎΠΌΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ.
Β
ΠΠΎΠ½ΡΡ: ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° iPhone
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ iPhone Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ, Π° Π΄Π»Ρ iPad ΡΠ΅Π»ΠΈΠ· Π²Π΅ΡΡΠΈΠΈ 4.0 ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π½ΠΈΠΌ.
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠΌΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π΄Π»Ρ iPhone Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΠΎΠ² min- ΠΈ max-width, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π² Π²Π΅ΡΡΠΈΡΡ Π½Π°ΡΠΈΠ½Π°Ρ Ρ 1.0.
/* ΠΠΎΡΡΡΠ΅ΡΠ½Π°Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ */ @media screen and (max-width: 320px) { body { opacity: 1; } } /* ΠΠ°Π½Π΄ΡΠ°ΡΡΠ½Π°Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ */ @media screen and (min-width: 321px) and (max-width: 480px) { body { opacity: 0; } }
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΡΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠΊΡΠ°Π½Π° iPhone Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 320px, ΡΠΎ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π°Π½Π½ΡΠΉ ΡΠ°ΠΊΡ. ΠΠ»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² min/max-width, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄ΠΎΡΡΡΠΏΠ½Π° Π² CSS3. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ max-width ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π½Π΅ΠΏΡΠΈΡΡΠ½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΈΡΡΠ΅ΠΌ.
Π§ΡΠΎΠ±Ρ Π΄Π°Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Π² iPhone Π½ΡΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΠ° ΡΠ΅Π³ viewport
:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
Π’Π°ΠΊ iPhone Π±ΡΠ΄Π΅Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅, Π° Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π°.
Β
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΎΠΌ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΠΌ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² iPhone. ΠΊ ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS3 background-size, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ iPhone.
@media screen and (max-device-width: 480px) { html, body { -moz-background-size: 80% auto; -webkit-background-size: 80% auto; background-size: 80% auto; } }
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size Π΄Π»Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½ΠΎΠ², ΠΌΡ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΡΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡ max-device-width, ΡΡΠΎΠ±Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΊΡΠ°Π½Π° Π² 480px. ΠΠ°ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠ΅Π³ΠΎΠ² html
ΠΈ body
ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ½Π° 80% ΠΎΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, Π° Π²ΡΡΠΎΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΡΡΠ°Π²Π»ΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Β
ΠΠΎ Π·Π΄Π΅ΡΡ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ iPhone, ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠ»ΡΡΠ°Π΅ΡΡΡ, ΡΡΠΎ Π² Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅. ΠΠ»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size Π΄Π»Ρ Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°.
@media screen and (min-width: 321px) and (max-width: 480px) { html, body { -moz-background-size: 50% auto; -webkit-background-size: 50% auto; background-size: 50% auto; } body { opacity: 0; } }
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ CSS3 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ Π²ΡΠ²ΠΎΠ΄Π° ΡΡΡΠ°Π½ΠΈΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΠ°ΠΊΡΠΎΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°, Π΅Π³ΠΎ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΈ Π΄ΡΡΠ³ΠΈΡ . ΠΡΠΈΡΠ΅ΠΌ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π»ΡΡΡΠ΅ ΠΈ Π»ΡΡΡΠ΅.
Css ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ipad ΠΈ iphone. Π¨ΠΏΠ°ΡΠ³Π°Π»ΠΊΠ° Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² β IT ΠΏΠΎΡΡΠ°Π»
Π‘ΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π²Π°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡ ΠΏΠΎΠ΄ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°? ΠΠΈΡΠ½ΠΎ ΠΌΠ½Π΅ Π½Π΅ ΠΎΠ΄Π½ΠΎΠΊΡΠ°ΡΠ½ΠΎ, Π½Π΅ Π²ΡΠ΅Π³Π΄Π°, Π΄Π»Ρ ΡΠ°ΠΊΠΎΠΉ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ ΡΠΈΠΏΠΈΡΠ½ΡΠ΅ css ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ. ΠΠΎΡΡΠΎΠΌΡ ΠΌΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΡ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡΡ ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Β apple ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ iPad ΠΈ iPhone.
iPad ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
iPad Π² portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){ /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ /* STYLES GO HERE */ } |
iPad Π² landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){ /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){ /* STYLES GO HERE */ } |
iPad Π² portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPad 3 ΠΈ 4 ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² 3-Π³ΠΎ ΠΈΠ»ΠΈ 4-Π³ΠΎ ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΡ Ρ retina Π΄ΠΈΡΠΏΠ»Π΅Π΅ΠΌ
Retina iPad Π² portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} |
Retina iPad Π² landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} |
Retina iPad Π² portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ } |
iPad 1 & 2 ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
iPad 1 & 2 Π² portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */} |
iPad 1 & 2 Π² landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)Β Β { /* STYLES GO HERE */} |
iPad 1 & 2 Π² portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ } |
iPad mini ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
iPad mini Π² portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)Β Β { /* STYLES GO HERE */} |
iPad mini Π² landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)Β Β { /* STYLES GO HERE */} |
iPad mini Π² portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)Β Β { /* STYLES GO HERE */ } |
iPhone ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
iPhone 6 Media Queries
iPhone 6 in portrait & landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* STYLES GO HERE */} |
iPhone 6 Π² landscape
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPhone 6 Π² portrait
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPhone 6 Plus ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
iPhone 6 Plus in portrait & landscape
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 414px) and (max-device-width : 736px) { /* STYLES GO HERE */} |
iPhone 6 Plus in landscape
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPhone 6 Plus Π² portrait
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPhone 5 ΠΈ 5S ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
iPhone 5 ΠΈ 5S Π² portrait & landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */} |
iPhone 5 ΠΈ 5S Π² landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPhone 5 ΠΈ 5S Π² portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPhone 2G, 3G, 4, 4S ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ
ΠΡΠΈ ΠΌΠ΅Π΄ΠΈΠ° Π·Π°ΠΏΡΠΎΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ Π΄Π»Ρ iPod touch 1-4 ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΡ
iPhone 2G-4S Π² portrait ΠΈ landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* STYLES GO HERE */} |
iPhone 2G-4S Π² landscape
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}
| @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPhone 2G-4S Π² portrait
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }
| @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { /* STYLES GO HERE */ } |
ΠΡΠ»ΠΈ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π΄Π»Ρ Π²Π°Ρ, ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ Π΅ΠΉ Ρ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΡΡ . ΠΡΠΈΠΌ Π²Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΡΠ΅ ΡΠ΅ΡΡΡΡ
ΠΡΡΠΎΡΠ½ΠΈΠΊ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ:
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΠΊΡΠ°Π½Π° — Π²Π΅Π±-API
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΊΡΠ°Π½Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²ΠΎΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΡΠΊΡΠ°Π½ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ Π΅Π΅. Π Π΅ΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π½Π°ΡΡ ΡΠ²ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, Ρ ΠΎΡΠΎΡΠΎ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΠΊΡΠ°Π½Π°, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΠΊΡΠ°Π½Π°, ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΡΠ°ΠΊ ΠΈ JavaScript.ΠΠ΅ΡΠ²ΡΠΉ — ΡΡΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ (ΡΠΎ Π΅ΡΡΡ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ°) ΠΈΠ»ΠΈ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ (Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π°).
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± — ΡΡΠΎ API ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΡΠ°Π½Π° JavaScript, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π° ΠΈ, Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅, Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ.
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ ΡΠ»ΡΡΠ°Π΅Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ — ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠ°ΡΡΡΠ½ΡΠ»Π°ΡΡ ΠΏΠΎ ΡΠ°ΠΌΠΎΠΌΡ Π΄Π»ΠΈΠ½Π½ΠΎΠΌΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΈΡΠΏΠ»Π΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ HTML-ΠΊΠΎΠ΄ΠΎΠΌ
- Π
- Π
- Π
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. Π ac est dolor, quis tincidunt leo.Cras Commodo Quam Non Tortor Conctetur Eget Rutrum Dolor Ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.
CSS ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΡΠ°Π½Π°
html, body {
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: 100%;
}
ΡΠ΅Π»ΠΎ {
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ 1px;
-moz-box-sizing: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
ΠΏ {
ΡΡΠΈΡΡ: 1em Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ;
ΠΌΠ°ΡΠΆΠ°: 0;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: .5em;
}
ul {
ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ;
ΡΡΠΈΡΡ: 1em ΠΌΠΎΠ½ΠΎΡΠΈΡΠΈΠ½Π½ΡΠΉ;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΠ±ΠΈΠ²ΠΊΠ°:.5em;
-moz-box-sizing: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
ΡΠΎΠ½: ΡΠ΅ΡΠ½ΡΠΉ;
}
li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΠΌΠ°ΡΠΆΠ°: 0;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0.5em;
ΡΠΎΠ½: Π±Π΅Π»ΡΠΉ;
}
ΠΠΎΠ³Π΄Π° Ρ Π½Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±ΡΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΠΎΠ³ΠΎ ΡΠ»ΡΡΠ°Ρ Π΄Π»Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΊΡΠ°Π½ ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {
#toolbar {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
}
@media screen ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) {
#toolbar {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 2,65 ΠΌΠΌ;
Π²ΡΡΠΎΡΠ°: 100%;
}
ΠΏ {
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: 2em;
}
li + li {
ΠΌΠ°ΡΠΆΠ°-Π²Π΅ΡΡ
:.5em;
}
}
Π Π²ΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΈΠ»ΠΈ iframe), Π° Π½Π΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΡΠΎΡ API ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌ ΠΈ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π² Firefox OS ΠΈ Firefox Π΄Π»Ρ Android Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ moz
ΠΈ Π΄Π»Ρ Internet Explorer Π² Windows 8.1 ΠΈ Π²ΡΡΠ΅ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ ΠΌΡ
.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°) ΠΌΠΎΠ³ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΊΡΠ°Π½Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠ΅Π³Π΄Π° ΡΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ, ΡΡΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅.Π₯ΠΎΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ²Π»ΠΈΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ³ΡΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΡΡΠΈΡΡΡΡ ΠΈΠ·-Π·Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ.
API ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΡΠ°Π½Π° ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΡΠΈ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°Π½ΠΈΠΈ
Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΊΡΠ°Π½Π°, ΠΈ ΡΠ°ΠΌΠ° ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠΈΡΠ°Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΡΠ°Π½Π° .ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ
ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ.
screen.addEventListener ("ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ", function () {
console.log (Β«ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΊΡΠ°Π½Π°:Β» + screen.orientation);
});
ΠΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΠΡΠ±ΠΎΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΡΠ°Π½ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ. ΠΠΊΡΠ°Π½ Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° Screen.lockOrientation ()
ΠΈ ΡΠ°Π·Π±Π»ΠΎΠΊΠΈΡΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° Screen.unlockOrientation ()
.
Screen.lockOrientation ()
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΡΠΎΠΊΡ (ΠΈΠ»ΠΈ ΡΠ΅ΡΠΈΡ ΡΡΡΠΎΠΊ) Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΈΠΏΠ° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠΉ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ.ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ-ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ
, ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ-Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ
, Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ-ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ
, Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ-Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ
, ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ
, Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ
(ΡΠΌ. Screen.lockOrientation
, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΡΡΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. ).
screen.lockOrientation ('ΠΏΠ΅ΠΉΠ·Π°ΠΆ');
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠ° ΡΠΊΡΠ°Π½Π° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ A Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
, Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ B Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ A Π² B ΠΈΠ»ΠΈ ΠΈΠ· B Π² A Π½Π΅ Π²ΡΠ·ΠΎΠ²Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ±Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΡ
ΡΠ°Π½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅Π»ΠΈ.
ΠΠ΄Π½Π°ΠΊΠΎ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠ° ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
, Π΅ΡΠ»ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π° Π΄Π»Ρ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ.
ΠΠ»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² Firefox OS ΠΈ Firefox Android (ΡΠΊΠΎΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅ Firefox) Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»Π΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² ΡΠ°ΠΉΠ»Π΅ ΠΌΠ°Π½ΠΈΡΠ΅ΡΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
"ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ": "ΠΏΠΎΡΡΡΠ΅Ρ"
html — ΠΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΠΈ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π² CSS?
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΊ iPad (Π²ΡΠ΅ ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΡ, Π²ΠΊΠ»ΡΡΠ°Ρ iPad mini)
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠ°Π±ΠΎΡΠ΅ Apple Π½Π°Π΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ Π»Π΅Π³ΠΊΠΎΡΡΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², Π²ΡΠ΅ 5 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ iPad (iPad 1-5 ΠΈ iPad mini) ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π°ΡΠ΅Π»Π΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° CSS.Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
iPad Π² ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΈ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (max-device-width: 1024px) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
iPad Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
iPad Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ’ ΠΠΠΠ‘Π¬ * /}
iPad 3 ΠΈ 4 ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° iPad Retina 3-Π³ΠΎ ΠΈ 4-Π³ΠΎ ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΡ (ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ), ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΡ @ 2x ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ Π΄ΠΈΡΠΏΠ»Π΅Ρ Retina ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
iPad Retina Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΈ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (-webkit-min-device-pixel-ratio: 2) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
iPad Retina Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ)
ΠΈ (-webkit-min-device-pixel-ratio: 2) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
iPad Retina Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ)
ΠΈ (-webkit-min-device-pixel-ratio: 2) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
iPad 1 ΠΈ 2 ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π΄ΡΡΠ³ΡΡ Π³ΡΠ°ΡΠΈΠΊΡ ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ Π΄ΡΡΠ³ΡΡ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΡ Π΄Π»Ρ Π΄ΠΈΡΠΏΠ»Π΅Ρ iPad Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ Π½ΠΈΠΆΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊ ΡΠ°ΡΠΌ Π² Π²Π°ΡΠ΅ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅!
iPad 1 ΠΈ 2 Π² ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΈ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (-webkit-min-device-pixel-ratio: 1) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
iPad 1 ΠΈ 2 Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ)
ΠΈ (-webkit-min-device-pixel-ratio: 1) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
iPad 1 ΠΈ 2 Π² ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
@media ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½
ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ)
ΠΈ (-webkit-min-device-pixel-ratio: 1) {/ * Π‘Π’ΠΠΠ ΠΠΠΠ‘Π¬ * /}
ΠΡΡΠΎΡΠ½ΠΈΠΊ: http: // stephen.io / mediaqueries /
@ media.orientation — CSS — W3cubDocs
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π€ΡΠ½ΠΊΡΠΈΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°
CSS ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΠΈΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π΄Π»Ρ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ
ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² Ρ ΡΠ°Π·Π±ΠΈΠ²ΠΊΠΎΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° . ΠΡΠΊΡΡΡΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΠ°Π½Π΅Ρ ΡΠΈΡΠ΅, ΡΠ΅ΠΌ Π²ΡΡΠΎΡΠ°, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΡΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°, Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π½ΠΈΠΆΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ²
-
ΠΏΠΎΡΡΡΠ΅Ρ
- ΠΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ½ΠΈΠΆΠ½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, ΡΠΎ Π΅ΡΡΡ Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅.
-
Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ
- ΠΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠΌΠ΅Π΅Ρ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ, Ρ. Π. Π¨ΠΈΡΠΈΠ½Π° Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ.
ΠΡΠΈΠΌΠ΅ΡΡ
HTML
ΠΠ»ΠΎΠΊ 1ΠΡΡΠ°Π²ΠΊΠ° 2ΠΡΡΠ°Π²ΠΊΠ° 3
CSS
ΠΊΠΎΡΠΏΡΡ { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ; } div { ΡΠΎΠ½: ΠΆΠ΅Π»ΡΡΠΉ; } @media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) { ΡΠ΅Π»ΠΎ { flex-direction: ΡΡΠ΄; } } @media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) { ΡΠ΅Π»ΠΎ { flex-direction: ΡΡΠΎΠ»Π±Π΅Ρ; } }
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
ΠΠ°ΡΡΠΎΠ»ΡΠ½ΡΠΉ | ||||||
---|---|---|---|---|---|---|
Π₯ΡΠΎΠΌ | ΠΡΠ°ΠΉ | Firefox | Internet Explorer | Opera | Safari | |
ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΡΠ½ΠΊΡΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»Ρ | 3 | 12 | 2 | 9 | 10.6 | 5 |
ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ | ||||||
---|---|---|---|---|---|---|
Android Π²Π΅Π±-ΠΏΡΠΎΡΠΌΠΎΡΡ | Chrome Π΄Π»Ρ Android | Firefox Π΄Π»Ρ Android | Opera Π΄Π»Ρ Android | Safari Π½Π° iOS | ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ Samsung | |
ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΡΠ½ΠΊΡΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»Ρ | β€37 | 18 | 4 | 11 | 4,2 | 1,0 |
ΠΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΊΡΠ°Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠΊΡΠ°Π½Π°, ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ. Π Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΠΊΡΠ°Π½Π° Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΈ Π°Π΄Π°ΠΏΡΠ°ΡΠΈΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΡΠΊΡΠ°Π½Π°. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΡΠ°ΠΊ ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Javascript. Π ΡΡΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ Π½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS.
ΠΠΈΠΆΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π·Π°ΠΏΡΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ @media ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ (ΡΠΈΡΠΈΠ½Π° Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ) ΠΈΠ»ΠΈ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ (Π²ΡΡΠΎΡΠ° Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ).
ΠΡΠ°ΠΊ, Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° flex-direction Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«rowΒ» Π΄Π»Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«columnΒ» ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅.
ΠΡΠΈΠΌΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΡΠ°Π½Π°: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
ΡΠ΅Π»ΠΎ {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ;
}
div {
ΡΠΎΠ½: # c579d1;
}
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) {
ΡΠ΅Π»ΠΎ {
flex-direction: ΡΡΠ΄;
}
}
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {
ΡΠ΅Π»ΠΎ {
flex-direction: ΡΡΠΎΠ»Π±Π΅Ρ;
}
}
ΠΠ΅ΡΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ
ΠΡΠΎΡΠ°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠ°
Π’ΡΠ΅ΡΡΠ΅ ΠΏΠΎΠ»Π΅
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ CSS ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° iframe, Π° Π½Π΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.ΠΡΠΊΡΡΡΠΈΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΈΡΠ΅, ΡΠ΅ΠΌ Π΅Π΅ Π²ΡΡΠΎΡΠ°, ΠΈ ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ CSS: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
html,
ΡΠ΅Π»ΠΎ {
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: 100%;
}
ΡΠ΅Π»ΠΎ {
Π³ΡΠ°Π½ΠΈΡΠ°: 1px solid # 666;
-moz-box-sizing: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
ΠΏ {
ΡΡΠΈΡΡ: 16px Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΠ±ΠΈΠ²ΠΊΠ°:.5em;
}
ul {
ΡΡΠΈΡΡ: 14px ΠΌΠΎΠ½ΠΎΡΠΈΡΠΈΠ½Π½ΡΠΉ;
ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ;
ΠΌΠ°ΡΠΆΠ°: 0;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: .5em;
-moz-box-sizing: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
ΡΠΎΠ½: # 9289d6;
}
li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΠΌΠ°ΡΠΆΠ°: 0;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0.5em;
ΡΠΎΠ½: #fff;
}
@media ΡΠΊΡΠ°Π½ ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {
#ΠΏΡΠΈΠΌΠ΅Ρ {
ΡΠΈΡΠΈΠ½Π°: 100%;
}
}
@media screen ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) {
#ΠΏΡΠΈΠΌΠ΅Ρ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 2.65em;
Π²ΡΡΠΎΡΠ°: 100%;
}
ΠΏ {
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: 2em;
}
li + li {
Π²Π΅ΡΡ
Π½Π΅Π΅ ΠΏΠΎΠ»Π΅: .5em;
}
}
- 1
- 2
- 3
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.Lorem Ipsum Π±ΡΠ» ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ Π² ΠΎΡΡΠ°ΡΠ»ΠΈ Ρ 1500-Ρ
Π³ΠΎΠ΄ΠΎΠ², ΠΊΠΎΠ³Π΄Π°
ΠΠ΅ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°Ρ Π²Π·ΡΠ» ΠΊΠ°ΠΌΠ±ΡΠ· Ρ ΡΡΠΈΡΡΠΎΠΌ ΠΈ ΡΠΊΡΠ΅ΠΌΠ±Π»ΠΈΡΠΎΠ²Π°Π» Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΈΠ³Ρ Ρ ΠΎΠ±ΡΠ°Π·ΡΠ°ΠΌΠΈ ΡΡΠΈΡΡΠ°.
ΠΠ½ ΠΏΠ΅ΡΠ΅ΠΆΠΈΠ» Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΡΡ Π²Π΅ΠΊΠΎΠ², Π½ΠΎ ΠΈ ΡΠΊΠ°ΡΠΎΠΊ Π² ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠΉ Π½Π°Π±ΠΎΡ,
ΠΎΡΡΠ°Π²Π°ΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ — HTML ΠΈ CSS — Π€ΠΎΡΡΠΌΡ SitePoint
OBXjuggler:
ΠΡΠΎΡΡ ΡΡΠΎΡΠ½ΠΈΡΡ.
OBXjuggler:
— ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π²Ρ ΠΌΠ½Π΅ Π³ΠΎΠ²ΠΎΡΠΈΡΠ΅, ΠΌΠ½Π΅ Π½ΡΠΆΠ΅Π½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Β«ΠΏΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅Β»?
ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ½Π°ΡΠ°Π»Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ, Π»ΠΈΠ±ΠΎ ΡΠ½Π°ΡΠ°Π»Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΌ (ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ). ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π» ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ 25 Π»Π΅Ρ ΠΈ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Ρ ΠΏΡΠΈΠ²ΡΠΊ. ΠΠ½Π΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΈΠ· ΡΡΠΎΠΉ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΠΎ ΠΌΠΎΠ΅ Π»ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅, ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ Π΄Π°Π»Π΅Π΅ Ρ ΠΎΡΠΎΡ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ (ΠΊΠ°ΠΊ ΡΡΠΈΠ»Π°Π½ΡΠ΅ΡΡ) Π²Π°ΠΌ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π°, Π° Π·Π°ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ . .
ΠΠ°ΠΊΠΎΠΉ Π±Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π²Ρ Π½ΠΈ Π²ΡΠ±ΡΠ°Π»ΠΈ, ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½Ρ.
Π― Π½Π°ΡΠΈΠ½Π°Ρ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΈ ΡΠΎΠ·Π΄Π°Ρ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ — ΡΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°ΠΌΠ°Ρ Π²Π°ΠΆΠ½Π°Ρ Π²Π΅ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ).
Π‘ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π΄Π°ΡΡ ΡΠ΅Π±Π΅ ΡΡΠ΄ Π²ΠΎΠΏΡΠΎΡΠΎΠ², ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π½Π°ΡΠ°ΡΡ.
Π‘ΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΎΡΠ΅?
ΠΡΠ΄ΡΡ Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½ΡΡΡΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΈ Π² Π½ΠΈΡ
Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅ Π·Π°ΠΏΠΈΡΠ΅ΠΉ.
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π»ΠΈ ΡΠ΅ΠΊΡΡ Π² ΠΏΡΠ½ΠΊΡΠ°Ρ
ΠΌΠ΅Π½Ρ?
ΠΠ°ΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΎΡ ΡΠΏΡΠ°Π²ΠΈΡΡΡ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°?
ΠΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΎΡΠ²Π΅ΡΡ Π½Π° ΡΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ΅ΡΠΈΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ. Π’ΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΈ Π²Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡΠ΄Π΅ΡΠ΅ Π·Π½Π°ΡΡ, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΡΠ° ΡΠΎΡΠΊΠ°, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΠΎΡΠΊΡΡΠ²Π°Ρ ΠΈ Π·Π°ΠΊΡΡΠ²Π°Ρ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠΊΠ° ΡΡΠΎ-ΡΠΎ Π½Π΅ ΡΠ»ΠΎΠΌΠ°Π΅ΡΡΡ ΠΈΠ»ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΡΡΠ°Π½Π½ΠΎ. ΠΡΠΎΡ ΠΏΠ΅ΡΠ΅Π»ΠΎΠΌΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΡΡΡΠΏΠΈΡ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Π½Π°ΡΠ½Π΅ΡΠ΅ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π»ΡΠ±ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΠ» Π²ΡΡΠ΅.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠ»ΠΈ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠ»ΠΈ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ (ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠ»ΠΈ HTML ΠΈ CSS), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ Π·Π°Π±ΡΡΡ ΠΎΠ± ΡΡΠΎΠΌ.
ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠ°ΠΊΠΈΠΌ Π±Ρ ΠΎΠ½ Π½ΠΈ Π±ΡΠ», ΠΈ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅ΡΠ΅ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅.
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡΠ΅ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ Π·Π° ΡΠ°Π· ΠΈ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΡΡΠΈΡΡΠ΅ΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΡΡΠΎ Π²ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΊΠΎΠ½ΡΠΈΡΠ΅. Π― ΡΡΠ°ΡΠ°ΡΡΡ Π΄Π΅ΡΠΆΠ°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΡΡΡ Π½ΠΈΠΆΠ΅ ΡΠ°Π·Π΄Π΅Π»Π°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΡΡΡΡΡ, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»ΡΡΡ ΠΈΡ Π²ΡΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ (Π΅ΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ), Π½ΠΎ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π»ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅.
ΠΠ»ΠΎΡ ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°ΡΠΈΠ½Π°ΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ Π² ΠΊΠΎΠ½ΡΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊ ΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΆΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΏΠΎΠ·Π΄Π½ΠΎ ΡΡΠΎ-ΡΠΎ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡ. ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½Ρ Π±ΡΠ» Π·Π°Π»ΠΎΠΆΠ΅Π½ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΠΈ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΎ-ΡΠΎ Π²ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠ΄ΠΎΠ±Π½ΠΎ, Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Π±ΡΠ»Π° Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π½Π°ΡΠ°Π»Π°.
OBXjuggler:
ΡΠ½ΠΎΠ²Π° Π²Ρ ΡΠΊΠ°Π·Π°Π»ΠΈ Π²ΡΡΠ΅ « ΠΠ°Π±ΡΠ΄ΡΡΠ΅ ΠΎΠ± ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ. »
Π Π°Π·Π²Π΅ Ρ ΠΌΠ΅Π½Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ: Π»Π°Π½Π΄ΡΠ°ΡΡΠ½Π°Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ?
ΠΠ° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ 10 Π»Π΅Ρ Ρ Π½ΠΈ ΡΠ°Π·Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΡΠ½ΡΡ ΡΠ°ΠΉΡΠΎΠ², Π½Π°Π΄ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°Π».ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ ΠΈΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅.
ΠΡΠ΅ Π°Π»ΡΠ±ΠΎΠΌΠ½ΡΠ΅ Π²ΡΡΠΎΡΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π΄Π΅ΡΠΆΠ°Ρ ΡΠ²ΠΎΠΈ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²ΠΈΠ΄Π΅ΠΎ. ΠΠ°ΠΆΠ΅ Π΄Π»Ρ Π²ΠΈΠ΄Π΅ΠΎ Π²Π°ΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π½Π°ΡΡ ΠΎ Π»Π°Π½Π΄ΡΠ°ΡΡΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½, Π° Π²ΡΡΠΎΡΠ° Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ Π²ΠΈΠ΄Π΅ΠΎ.
Π§Π°ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ²ΠΎΠΈ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΏΠ»ΠΎΡ ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π» ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°, ΠΈ Ρ Π½ΠΈΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ.ΠΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΡΠ΅Π»Π΅ΡΠΎΠ½ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ.
ΠΡΠ»ΠΈ Π±Ρ Π²Ρ Π΄ΡΠΌΠ°Π»ΠΈ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΡΠΎΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠΎΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ Π²ΡΠ΅Π³ΠΎ 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈ Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π²ΡΡΠΎΡΡ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΌΠ½Π΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½ Π΄ΠΎ ΡΠΎΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ, ΠΈΠ½Π°ΡΠ΅ Π²Π΅ΡΡ ΠΈΠ»ΠΈ Π½ΠΈΠ· ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΡΡΡΡ. ΠΡΠΎ Π½Π΅ΠΆΠΈΠ·Π½Π΅ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄.
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°
Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΎΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°Π·ΡΠΌΠ½ΡΡ Π²ΡΡΠΎΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΎ.
Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°.
ΠΡΠ»ΠΈ Π² Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ Π½Π΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π³ΠΈΠ±ΠΊΠΈΠΌ, ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π³Π΄Π΅-ΡΠΎ Π² ΠΌΠΈΡΠ΅ ΡΠΌΡΠ΅Ρ. ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° — ΡΡΠΎ ΡΠΎ, ΡΠ΅Π³ΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·Π±Π΅Π³Π°ΡΡ Π²ΡΠ΅Π³Π΄Π°, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
ΠΡΠ΅Π³Π΄Π° Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π½Π΅ Ρ Π²ΡΠ΅Ρ ΠΎΠΊΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΠΎ. Π£ ΠΌΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ 27-Π΄ΡΠΉΠΌΠΎΠ²ΡΠΉ ΡΠΊΡΠ°Π½, 3 Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΊΡΡΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π²ΡΠ΅ ΠΎΠ½ΠΈ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²ΡΡΠΎΡΡ.ΠΠ½Π΅ Π²ΡΠ΅ Π΅ΡΠ΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΈΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· Π½ΠΈΡ Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΎΠΊΠ½ΠΎ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° 2500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Ρ Π½Π°Π±ΠΈΡΠ°Ρ ΡΡΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 800 x 1000 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎ ΡΡΡΠΈ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°ΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ².
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π³ΠΈΠ±ΠΊΠΈΠ΅ / Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ flexbox ΠΈ grid), Π° Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΆΠ΅ Π½Π΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π³ΠΈΠ±ΠΊΠΈΠ΅, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈΠΌ.
ΠΡΠΈ ΡΡΠ°ΡΡΠΈ ΡΡΠ°ΡΡΠ΅ (2012 Π³.), Π½ΠΎ ΠΎΠ±ΡΡΡΠ½ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠΏΠΎΠΌΡΠ½ΡΠ».
ΠΠ°ΠΏΡΡΠ°Π½Π½ΡΠΉ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ — 20 ΠΌΠ°ΡΡΠ° 12
Π Π΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ — Π·Π°ΠΏΡΡΠ°Π½ΠΎ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ°Π·Π° ΠΌΡΡΠ»Π΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ — ΡΡΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΎΠ±ΡΠ°Π· ΠΌΡΡΠ»Π΅Π½ΠΈΡ (ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΏΠΎ ΠΌΠΎΠ΅ΠΌΡ ΠΌΠ½Π΅Π½ΠΈΡ), Π½ΠΎ, ΠΏΠΎΡ ΠΎΠΆΠ΅, ΡΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ ΠΌΡΡΠ»Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ . ΠΡΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, Π½ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ …
Smashing Magazine — 22 ΠΌΠ°ΡΡΠ° 12 Π³.
ΠΠΏΠΏΠ°ΡΠ°ΡΠ½ΠΎ-Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ — Smashing Magazine
ΠΡΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ.Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΡΡΡΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΠ½Π° Π² ΠΊΠΎΠΌΠ½Π°ΡΠ΅; ΡΠΎ Π΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°, Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡΡ ΠΎ …
ΠΠ°ΠΆΠ΅ Π² 2012 Π³ΠΎΠ΄Ρ Π±ΡΠ»ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ². Π‘Π΅ΠΉΡΠ°Ρ ΠΈΡ Π΅ΡΠ΅ ΡΠΎΡΠ½ΠΈ.
ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS — TutorialBrain
ΠΠ° Π³Π»Π°Π²Π½ΡΡ Β»CSSΒ» ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅ ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Media Queries Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ.
ΠΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ, Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Media Queries, ΠΈ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΎΡ Π²Π°ΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ· Π½ΠΈΡ .
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ Π±ΡΠ» Π²Π²Π΅Π΄Π΅Π½ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ CSS3. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ W3C.
ΠΡΠΎ ΡΠΏΠΎΡΠΎΠ± Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π°ΡΡΠ΄Ρ Ρ ΡΠΈΠΏΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ (ΡΠ²ΠΎΠΉΡΡΠ²Π°) ΡΡΡΡΠΎΠΉΡΡΠ² ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ: —
- Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
- Π Π°Π·ΠΌΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°
- Π Π°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΈΡΠΈΠ½Π° ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
- ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
- ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
CSS2 ΡΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ» Π·Π°ΠΏΡΠΎΡ @media ΡΠ°Π½Π΅Π΅ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠΎΠ² ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΠΎ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @media Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π΅ Π±ΡΠ»ΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Ρ Π΄Π»Ρ Π΅Π³ΠΎ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π² CSS3 ΠΎΠ½ Π±ΡΠ» ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ (ΡΠ²ΠΎΠΉΡΡΠ²) ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΠΈΠΏΡ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Ρ ΠΊ ΡΠ΅Π³ΠΈΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡ.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠΈΠΏΡ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ | ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ |
Π²ΡΠ΅ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ². |
ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ² Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ². | |
ΡΠΊΡΠ°Π½ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎ Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠ²Π΅ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΡ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ² |
ΡΠ΅ΡΠΈ | Π΄Π»Ρ ΡΠΊΡΠ°Π½Π½ΡΡ ΡΠΈΠ½ΡΠ΅Π·Π°ΡΠΎΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° |
Π’ΠΈΠΏΡ ΡΠ΅ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ | ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ | |
ΠΡΠ°ΠΉΠ»Ρ | ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎ Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ² Ρ ΡΠ°ΠΊΡΠΈΠ»ΡΠ½ΠΎΠΉ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΡΡ ΠΡΠ°ΠΉΠ»Ρ. | |
Ρ ΡΠΈΡΠ½Π΅Π½ΠΈΠ΅ΠΌ | Π΄Π»Ρ ΠΏΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ² ΠΡΠ°ΠΉΠ»Ρ | |
ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½ΡΠΉ | ΠΠ»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΡΠΊΠ΅ | |
ΠΏΡΠΎΠ΅ΠΊΡΠΈΡ | tty | Π΄Π»Ρ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ ΡΠ΅ΡΠΊΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ°Π³ΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π»Π΅ΡΠ°ΠΉΠΏΡ, ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Ρ ΠΈ Ρ. Π. |
tv | Π΄Π»Ρ ΡΠ΅Π»Π΅Π²ΠΈΠ·ΠΎΡΠΎΠ² Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ |
ΠΠ°ΠΆΠ½ΡΠ΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π½ΠΎΡΠΈΡΠ΅Π»Ρ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ Π΄Π°ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ Media Queries Level 4.
ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΡΡ .
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΡΠ°Π½ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠΌΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΠΌ ΠΈΡ Π² Π½Π°ΡΠ΅ΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° | ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ | ||
ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ | ΠΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΊ Π²ΡΡΠΎΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° | ||
ΡΠ²Π΅ΡΠ½ΠΎΠΉ Π¦Π²Π΅ΡΠ½ΠΎΠΉ ΡΠΊΡΠ°Π½ | |||
ΡΠ΅ΡΠΊΠ° | ΠΡΠ»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΡΠΎΡΠ½ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎΠΌ | ||
Π²ΡΡΠΎΡΠ° | Π²ΡΡΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° | ||
Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ 2 9027 hovers) | |||
max-aspect-ratio | ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΊ Π²ΡΡΠΎΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° | ||
max-color | ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π±ΠΈΡ Π½Π° ΡΠ²Π΅Ρ Π² ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ | ||
max-height | ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° 9 0278 | ||
ΠΌΠ°ΠΊΡ. Π Π°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ | ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅Π΅ | ||
max-width | ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° | ||
10 ΠΌΠΈΠ½-32 ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ | ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΊ Π²ΡΡΠΎΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° | ||
min-color | ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π±ΠΈΡ Π½Π° ΡΠ²Π΅Ρ Π² ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ | ||
min-height | ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° | ||
ΠΠΈΠ½. ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ | ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅Π΅ | ||
ΠΠΈΠ½.ΡΠΈΡΠΈΠ½Π° | ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° | ||
2 ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ | ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ ΠΈΠ»ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ | | |
ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ution | ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅Π΅ | ||
ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ | ΠΡΠΈ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ||
ΡΠΈΡΠΈΠ½Π° | Π¨ΠΈΡΠΈΠ½Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° |
Π’Π΅Π»Π΅ΡΠΎΠ½Ρ Android | ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ |
---|---|---|---|
HTC One X | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
HTC One X | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠΎΡΡΡΠ΅Ρ |
LG G5 | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
LG G5 | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠΎΡΡΡΠ΅Ρ |
Samsung ΠΠ°Π»Π°ΠΊΡΠΈΠΊΠ° S6 | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
Samsung ΠΠ°Π»Π°ΠΊΡΠΈΠΊΠ° S6 | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠΎΡΡΡΠ΅Ρ |
, Samsung Galaxy S6 Edge, | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
, Samsung Galaxy S6 Edge, | 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 640px | ΠΠΎΡΡΡΠ΅Ρ |
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ Π’ΠΠΠΠ€ΠΠΠΠ ANDROID
/ * HTC One X - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media screen ΠΈ (device-width: 360px) ΠΈ (device-height: 640px) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * HTC One X - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media screen ΠΈ (device-width: 360px) ΠΈ (device-height: 640px) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * LG G5 - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media screen ΠΈ (device-width: 360px) ΠΈ (device-height: 640px) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * Samsung Galaxy S6 - ΠΠ΅ΠΉΠ·Π°ΠΆ ΠΈ ΠΠΎΡΡΡΠ΅Ρ * / @media screen ΠΈ (device-width: 360px) ΠΈ (device-height: 640px) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * Samsung Galaxy S6 Edge - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media screen ΠΈ (device-width: 360px) ΠΈ (device-height: 640px) {/ * Π‘ΡΠΈΠ»Ρ CSS * /}
ΠΠ»Π°Π½ΡΠ΅ΡΡ Android | ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ |
---|---|---|---|
Nexus 10 | 800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 1280px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
Nexus 10 | 800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 1280px | ΠΠΎΡΡΡΠ΅Ρ |
Nexus 7 | 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 960px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
Nexus 7 | 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 960px | ΠΠΎΡΡΡΠ΅Ρ |
Surface Pro 3 | 960px | 1440px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
Surface Pro 3 | 960px | 1440px | ΠΠΎΡΡΡΠ΅Ρ |
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΠΠΠΠ¨ΠΠ’ΠΠ ANDROID
/ * Nexus 10 - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ * / @media screen ΠΈ (ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (Π²ΡΡΠΎΡΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1280 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * Nexus 7 - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ * / @media screen ΠΈ (ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (Π²ΡΡΠΎΡΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * Surface Pro 3 - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media screen ΠΈ (ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (Π²ΡΡΠΎΡΠ° ΡΡΡΡΠΎΠΉΡΡΠ²Π°: 1440 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /}
Π Π°Π·Π½ΠΎΠ΅ | ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ |
---|---|---|---|
BlackBerry Z10 | 384px | 640px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
BlackBerry Z10 | 384px | 640px | ΠΠΎΡΡΡΠ΅Ρ |
Kindle Fire | 1024px | 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | ΠΠ΅ΠΉΠ·Π°ΠΆ |
Kindle Fire | 1024px | 600px | ΠΠΎΡΡΡΠ΅Ρ |
/ * BlackBerry Z10 - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 384px) and (max-device-width: 640px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * Kindle Fire - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 600px) and (max-device-width: 1024px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /}
IPAD | ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ |
---|---|---|---|
iPad | 768px | 1024px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPad | 768px | 1024px | ΠΠΎΡΡΡΠ΅Ρ |
iPad Mini | 768px | 1024px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPad Mini | 768px | 1024px | ΠΠΎΡΡΡΠ΅Ρ |
iPad Mini 2 | 1536px | 2048px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPad Mini 2 | 1536px | 2048px | ΠΠΎΡΡΡΠ΅Ρ |
iPad Pro | 2048px | 2732px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPad Pro | 2048px | 2732px | ΠΠΎΡΡΡΠ΅Ρ |
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ IPAD
/ * iPad - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 768px) and (max-device-width: 1024px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * iPad Mini - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 768px) and (max-device-width: 1024px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * iPad Mini 2-4 - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 1536px) and (max-device-width: 2048px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * iPad Pro - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 2048px) and (max-device-width: 2732px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /}
IPHONE | ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° | ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ |
---|---|---|---|
iPhone 4 | 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPhone 4 | 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | ΠΠΎΡΡΡΠ΅Ρ |
iPhone 5 | 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 568px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPhone 5 | 320 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 568px | ΠΠΎΡΡΡΠ΅Ρ |
iPhone 7 | 375px | 667px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPhone 7 | 375px | 667px | ΠΠΎΡΡΡΠ΅Ρ |
iPhone 7 Plus | 414px | 736px | ΠΠ΅ΠΉΠ·Π°ΠΆ |
iPhone 7 Plus | 414px | 736px | ΠΠΎΡΡΡΠ΅Ρ |
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ IPHONE
/ * iPhone 4 - ΠΠ΅ΠΉΠ·Π°ΠΆ ΠΈ ΠΏΠΎΡΡΡΠ΅Ρ * / @media only screen ΠΈ (min-device-width: 320px) and (max-device-width: 480px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * iPhone 5 - ΠΠ΅ΠΉΠ·Π°ΠΆ ΠΈ ΠΏΠΎΡΡΡΠ΅Ρ * / @media only screen ΠΈ (min-device-width: 320px) and (max-device-width: 568px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * iPhone 7 - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 375px) and (max-device-width: 667px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /} / * iPhone 7plus - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈ ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ * / @media only screen ΠΈ (min-device-width: 414px) and (max-device-width: 736px) and (ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ / ΠΏΠΎΡΡΡΠ΅ΡΠ½Π°Ρ) {/ * Π‘ΡΠΈΠ»Ρ CSS * /}
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°?
CSS - ΠΎΠ΄Π½Π° ΠΈΠ· ΠΎΡΠ½ΠΎΠ² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.Π₯ΠΎΡΡ CSS Π½Π°ΡΠΈΠ½Π°Π»ΡΡ ΠΊΠ°ΠΊ ΡΡΠΎ-ΡΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΈΡΠ΅ΡΠ°ΡΠΈΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠ½ΠΎΡΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ CSS - ΡΡΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Β«ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅ΡΒ» ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ΅Π³ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΏΠ΅ΡΠ²ΡΠ΅ Π΄Π½ΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ. CSS ΡΡΠ°Π» Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ Π±Π΅Π· ΠΎΡΠΎΠ±ΡΡ ΡΡΠΈΠ»ΠΈΠΉ.
Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ ΠΌΡ Π³Π»ΡΠ±ΠΎΠΊΠΎ ΠΏΠΎΠ³ΡΡΠ·ΠΈΠΌΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²Π½ΠΎΡΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π³Π»ΡΠ΄Ρ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΡΠ°Π·Π²ΠΈΠ²Π°Π»ΠΎΡΡ, ΠΈ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS?
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS Π½Π°ΡΠΈΠ½Π°Π»ΠΈΡΡ ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS2, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΊΠ»ΡΡΠ°Π»Π° ΠΌΠ΅Π΄ΠΈΠ°-ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS Π² ΡΠ²ΠΎΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ. ΠΠ΅Π΄ΠΈΠ°-ΠΏΡΠ°Π²ΠΈΠ»Π° Π±ΡΠ»ΠΈ Π²Π²Π΅Π΄Π΅Π½Ρ Π² CSS ΠΏΠΎΡΠ»Π΅ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΡ Π·Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, Π½Π°Π²ΠΎΠ΄Π½ΠΈΠ²ΡΠΈΠΌΠΈ ΡΡΠ½ΠΎΠΊ ΠΈ Ρ ΠΎΡΠΎΡΠΎ Π²ΠΎΡΠΏΡΠΈΠ½ΡΡΡΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±ΠΈΡΠ΅Π»ΡΠΌΠΈ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ΅ΡΠ΅Π²ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³Π»ΠΈ ΡΠΈΡΠ°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π·Π° Π²Π°Ρ. ΠΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Ρ ΠΎΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ Π‘ΠΠ Π±ΡΠ»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΆΠ½Ρ, ΠΎΠ½ΠΈ Π½Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². Π‘ΠΈΠ»ΡΠ½Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠ΅Π΄ΠΈΠ°ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π΅ Π±ΡΠ»ΠΈ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΡΠ°ΠΊΠΎΠΉ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ (ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°!).
ΠΡΡΠΎΡΠ½ΠΈΠΊ: EmailonAcid
ΠΡΠ°ΠΊ, Π·Π°Π±Π΅Π³Π°Ρ Π²ΠΏΠ΅ΡΠ΅Π΄, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ CSS ΠΏΠΎΠ΄ΡΠΌΠ°Π»ΠΈ ΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π½Π΅ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π»ΠΈΡΡ Π² ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π΅, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π²Π²ΠΎΠ΄ΠΈΡΡ Π·Π°ΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ CSS.ΠΡΠΎ Π±ΡΠ»ΠΈ Π½Π°Π·Π²Π°Π½Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ CSS.
ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS, ΠΊΠ°ΠΊ ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΡΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS - ΡΡΠΎ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΈ Π·Π°ΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Π²Π΅ΠΊ ΡΠΎΡΠ΅Π½ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΌΠ΅Π΄ΠΈΠ°-ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½Π° ΡΠΌΠ°ΡΡΡΠΎΠ½, ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS ΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π½Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ. ΠΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π°Π»ΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΈΠΏΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π»ΠΎ Π½Π°Ρ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π³Ρ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄ΡΠΌΠ°Π»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ CSS, Π±ΡΠ»ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΈΠ½ΡΡΠΎ ΠΈ ΡΡΠ°Π»ΠΎ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS.
ΠΠ°ΡΡΡΠΏΠΈΠ» 2021 Π³ΠΎΠ΄! ΠΠ°ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ?
ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΉΡΠΈ Π²Π°ΠΌ Π² Π³ΠΎΠ»ΠΎΠ²Ρ: Β«ΠΠ΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΈ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS, ΡΡΠΈΡΡΠ²Π°Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ, ΠΏΠΎΡΠ²Π»ΡΡΡΠΈΡ ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π΄Π΅Π½ΡΒ»? ΠΡΠΎ ΠΈΡΠΊΡΠ΅Π½Π½ΠΈΠΉ ΠΈ ΡΠ°ΡΡΡΠΉ Π²ΠΎΠΏΡΠΎΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ²ΠΎΠΉ ΠΏΡΡΡ Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ².
Π§ΡΠΎ ΠΆ, CSS ΡΠ΅ΠΉΡΠ°Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ Π·ΡΠ΅Π»ΡΠΉ, ΡΠ΅ΠΌ ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ°Π½ΡΡΠ΅, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ» ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ CSS 2.Π‘Π΅ΠΉΡΠ°Ρ Ρ Π½Π°Ρ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π² CSS, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡΡΡ Π½ΠΎΠ²ΡΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΠΌΠΈ Π² CSS.
ΠΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΊΠΈΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π½Π° ΡΠΌ, - ΡΡΠΎ ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈ CSS. Π‘Π΅ΡΠΊΠΈ CSS Π°Π΄Π°ΠΏΡΠΈΠ²Π½Ρ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ ΠΈ ΡΠ°ΡΡΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². ΠΠ½ΠΈ ΡΡΠ΅Π±ΡΡΡ ΡΡΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΎΠ»Π±ΡΠ° Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΊΡΠ°Π½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΡΡΠΎΡΠ½ΠΈΠΊ: Google
ΠΡΡΠ³Π°Ρ ΡΠ°ΡΡΡ ΡΠ΅ΡΠΎΠΊ CSS - ΡΡΠΎ Π³ΠΈΠ±ΠΊΠΈΠΉ Π±Π»ΠΎΠΊ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ².ΠΠ°ΠΊ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Ρ Π²Π°Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ ΡΠ΅Π°Π³ΠΈΡΡΡΡ. ΠΡΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠ΄ΡΡ Π½Π° Π½Π΅Ρ Π½Π°ΡΠΈ ΡΡΠΈΠ»ΠΈΡ ΠΈ ΡΠΊΠΎΠ½ΠΎΠΌΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΎΡΡΠ°Π²Π»ΡΡ Π½Π°Ρ Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΡΠΌ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ: Β«ΠΠΎΠ»ΠΆΠ½Ρ Π»ΠΈ ΠΌΡ ΠΈΠ·ΡΡΠ°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ, Π² 2021 Π³ΠΎΠ΄ΡΒ»?
Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΠΏΡΠΈ ΠΎΡΠ²Π΅ΡΠ΅ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ Π΄Π²Π΅ Π²Π΅ΡΠΈ: Π½ΡΠΆΠ½Ρ Π»ΠΈ Π½Π°ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS Π² 2021 Π³ΠΎΠ΄Ρ. Π§ΡΠΎ ΠΆ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΠΏΡΠ°Π²Π΄Π°, ΡΡΠΎ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ CSS Π΄Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΡΠ΅ ΠΈ Π»ΡΡΡΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Π΅ΡΠ½ΠΎ ΠΈ ΡΠΎ, ΡΡΠΎ ΠΊΠ°ΠΊ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Ρ ΡΠ°ΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π±Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, Π° Π½Π΅ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ Π½Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ .
ΠΠΎ Π½ΠΎΠ²ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΌΠ΅Π½ΡΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ΅ΡΠ΅Π· ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠΎΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ»ΡΡΠ°Π΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΡ CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS ΡΠ²Π»ΡΡΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ. Π‘Π΅ΡΠΊΠΈ CSS Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎ ΡΡΡΡΠΊΡΡΡΠΎΠΉ Β«ΡΠ΅ΡΠΊΠ°Β», Π½ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ Π΄ΡΡΠ³ΠΈΡ ΠΎΠΏΡΠΈΠΉ. ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Ρ ΡΡΠ΅ΡΠΎΠΌ Π½ΠΎΠ²ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ, ΡΡΠΎΠ³ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ! ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ΅Π³ΠΎ-ΡΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π°ΠΌ Π½Π° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΠ΄ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.
ΠΡΠ΅ ΠΎΠ΄Π½Π° ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π° Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS ΡΠ΅Π³ΠΎΠ΄Π½Ρ - ΡΡΠΎ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² CSS. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° CSS, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ΅ΡΠΊΠΈ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΠ΅ Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π½Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ»ΡΡΡΠΈΡΡ Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ : Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° (ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ).
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ΅Π±ΡΡΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS.ΠΡΠ΅Π³Π΄Π° Π»ΡΡΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
Π§ΠΈΡΠ°ΡΡ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, HTML, WordPress ΠΈ Π΄Ρ.!
ΠΠ°ΠΊ ΠΏΠΈΡΠ°ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π² CSS Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°?
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ Π°Π½Π½ΠΎΡΠ°ΡΠΈΠΈ TestNG, ΠΊΠΎΡΠΎΡΡΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΉ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ.
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ ΡΠ»ΠΎΠ²ΠΎΠΌ Β«ΠΌΠ΅Π΄ΠΈΠ°Β» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
@media
@media |
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
@media only screen ΠΈ (max-width: 480px) {
/ * ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS / *
}
@media only screen and (max-width: 480px) { / * CSS rules to apply / * } |
ΠΡΠΎΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΊΠ°ΡΡ ΡΠΊΡΠ°Π½Ρ (Β«ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΡΠ°Π½Β», ΠΊΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ) Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.ΠΡΠ»ΠΈ ΠΎΠ½ Π΅Π³ΠΎ Π½Π°ΠΉΠ΄Π΅Ρ, ΡΡΠ»ΠΎΠ²ΠΈΡ Π±ΡΠ΄ΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ, ΠΈ Π² HTML-ΠΊΠΎΠ΄ Π±ΡΠ΄ΡΡ Π²Π½Π΅ΡΠ΅Π½Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π΄ΠΈΠ°-ΡΠΈΠΏΠ°, Π° Π½Π΅ ΠΌΠ΅Π΄ΠΈΠ°-Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (Π·Π°ΠΏΡΠΎΡΠΎΠ²), ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
@media print {
.ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
}
}
@media print { .heading { font-size: 12px } } |
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ Π·Π°ΠΏΡΠΎΡ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈΠΌΠ΅Π½ΠΈ ΠΊΠ»Π°ΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ° 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΏΠ΅ΡΠ°ΡΠ°ΡΡ.
ΠΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΡΡΠ΅Π΄ΡΡΠ² ΠΌΠ°ΡΡΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ
Π§ΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠΊΠ»ΠΈΠΊΠ° ΡΠ΅ΡΠ΅Π· Π½Π°ΡΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. Π ΡΡΠΎΠΌ Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ΅Π΄ΠΈΠ°-ΡΡΠ½ΠΊΡΠΈΠΉ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π½Π°ΡΠ΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ CSS. Π₯ΠΎΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠ°Π²ΠΈΠ» ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΌΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ Π»ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ , Π²Π°ΠΆΠ½ΡΠ΅ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ
ΠΠ΅ΡΠ²ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ, - ΡΡΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.ΠΠΏΠ΅ΡΠ°ΡΠΈΠΈ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Β«widthΒ», Β«max-widthΒ» ΠΈ Β«min-widthΒ» Π΄Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ·ΠΊΠΈΡ ΠΌΠ΅ΡΡ.
ΠΡΠΈΠΌΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ Π½ΠΎΡΠΈΡΠ΅Π»Ρ:
@media screen ΠΈ (max-width: 840px) {
ΠΏ {
ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ;
}
}
@media screen ΠΈ (max-width: 840px) { p { color: red; } } |
ΠΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠ°ΠΊ:
<ΡΡΠΈΠ»Ρ>
@media screen ΠΈ (max-width: 840px) {
ΠΏ {
ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ;
}
}
<ΡΠ΅Π½ΡΡ>
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΠΌΠ΅Π΄ΠΈΠ°-ΠΏΡΠ°Π²ΠΈΠ»
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 18 19 20 |
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΠΏΡΠ°Π²ΠΈΠ» Π΄Π»Ρ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ |
ΠΠ»Ρ ΡΠΊΡΠ°Π½Π° ΡΠΈΡΠΈΠ½ΠΎΠΉ Π±ΠΎΠ»Π΅Π΅ 840 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ΅Π³ Β«pΒ» Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ΅ΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π‘Π½ΠΈΠΌΠΎΠΊ ΡΠΊΡΠ°Π½Π° Π²ΡΡΠ΅ ΡΠ΄Π΅Π»Π°Π½ Π½Π° ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ LambdaTest.
ΠΠ° ΡΠΊΡΠ°Π½Π΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ 840 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠ΄ΠΎΠ±Π½ΠΎΠΌ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ LT browser, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π² Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Ρ 50+ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ΅ΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ LT Π±ΡΡΡΡΠ΅Π΅ ΠΈ ΠΏΡΠΎΡΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ, ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½Π°Ρ ΠΎΡΠ»Π°Π΄ΠΊΠ°, ΡΠ΅ΡΠ΅Π²ΠΎΠ΅ ΠΌΠΎΠ΄Π΅Π»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, LT Browser ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠΎΡΡΡΠ΄Π½ΠΈΡΠ°ΡΡ Ρ Π²Π°ΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Π΄Π»Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠ° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π·Π° ΡΡΠ΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ.
ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΏΡΡΡΠΈΡΡ HTML-ΠΊΠΎΠ΄ Π² ΡΠ²ΠΎΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈ Π½Π°ΡΠ°ΡΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π²ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅Ρ - Opera Π½Π° ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ Windows 10. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ.
Π‘ΠΠΠ§ΠΠ’Π¬ LT BROWSER
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ΅ CSS
ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° - ΠΎΠ΄Π½Π° ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΡΠ½ΠΈΠΆΠ°ΡΡΠΈΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠΊΠ»ΠΈΠΊΠ° Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΡ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ°, Π΅ΡΠ»ΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½ΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ, Π·Π½Π°Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π½Π°ΠΌ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ, ΡΡΠΎ ΠΏΠΎΠ²ΡΡΠΈΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠΊΠ»ΠΈΠΊΠ°.
ΠΡΠ°Π²ΠΈΠ»ΠΎ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½ΠΎΡΠΈΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) {
ΠΏ {
ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 36 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
}
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) { p { ΡΠ²Π΅Ρ: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 36 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } } |
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π² Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΈΠΆΠ½Π°Ρ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΡΠ½ΠΈΠΌΠΎΠΊ ΡΠΊΡΠ°Π½Π° ΡΠ΄Π΅Π»Π°Π½ ΠΈΠ· Π±ΡΠ°ΡΠ·Π΅ΡΠ° LT, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π΄Π²Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π Π°Π·ΡΠ΅ΠΌΡ
Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ Π΄Π»Ρ Π½ΠΎΡΠΈΡΠ΅Π»Π΅ΠΉ
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΎΡΠΊΠ»ΠΈΠΊΠ°. Π§ΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΈ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌΠΈ? ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΊΠΎΠ½Π½Π΅ΠΊΡΠΎΡΡ (Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠ΅) Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°. Π ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ CSS ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅Π»ΠΈ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
ΠΡΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅Π»ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΎ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΈ Π² Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡΡ ΠΈ Π² ΡΠ·ΡΠΊΠ°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ.Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅Π»Ρ Β«ΠΈΒ», Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
ΠΏ {
ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 36 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
}
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ) ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) { p { ΡΠ²Π΅Ρ: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 36 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } } |
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π°Π»ΡΠ±ΠΎΠΌΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΡΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, Ρ ΠΎΡΠΎΡΠΎ Π»ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ.
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ), (min-width: 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
ΠΏ {
ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 36 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
}
@media (ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ: Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ), (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) { p { ΡΠ²Π΅Ρ: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 36 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } } |
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ, Π΅ΡΠ»ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ - Π°Π»ΡΠ±ΠΎΠΌΠ½Π°Ρ ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° - 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.Π ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π½Π°Π±Π»ΡΠ΄Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ:
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π»Π°Π½Π΄ΡΠ°ΡΡΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ, ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. Π’ΠΎΡ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π΅Π½ Π½Π° ΡΠΊΡΠ°Π½Π΅ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π±ΠΎΠ»Π΅Π΅ 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΠ°Π²ΠΈΠ»ΠΎ Β«notΒ» ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΡΠ»ΠΎΠ²ΠΎΠΌ Β«notΒ», ΠΈ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ Π΄Π»Ρ ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΠ²ΠΎΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Ρ.
ΠΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π±ΡΠ» ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π° ΡΡΠΎΠ²Π½Π΅ 3 ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.Π‘ ΡΡΠΎΠ²Π½Π΅ΠΌ 4 ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΈΡΠ΅Π» ΠΈ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠ² Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡΠΎΠ², ΡΠΎ Π΅ΡΡΡ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅Π»Π΅ΠΉ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΡΠΎΠ²Π½Ρ 4 Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° Π²Π²ΠΎΠ΄ΠΈΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρ Π² Π·Π°ΠΏΡΠΎΡΡ. ΠΡΠ°ΠΊ, Π·Π°ΠΏΡΠΎΡ:
(ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 640 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
(ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 640 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) |
ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°ΠΏΠΈΡΠ°Π½ΠΎ ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ ΡΡΠΎΠ²Π½Ρ 4 ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
(640 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ <= ΡΠΈΡΠΈΠ½Π° <= 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ)
(640 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ <= ΡΠΈΡΠΈΠ½Π° <= 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) |
Π§ΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅ ΠΈ ΡΡΠ½Π΅Π΅ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΌΠ΅Π΄ΠΈΠ°-ΠΏΡΠ°Π²ΠΈΠ».ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ, ΠΈ ΠΎΠ±Π° ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΡΡΠΈ.
Π’ΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΈ ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄Ρ
ΠΡΠΎΡ ΠΏΠΎΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π°ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΏΡΠ°Π²ΠΈΠ» ΠΈ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΈΡΡΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎ Π½Π°ΡΠ΅ΠΌΡ ΠΆΠ΅Π»Π°Π½ΠΈΡ. ΠΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π΄Π΅ΡΡ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΅ΡΠΈΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ? 640 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ 1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Π΅ΡΠ΅? ΠΡΠΎ ΡΠΈΡΠ»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ ΡΠΎΡΠΊΠ° ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΎΡΠΊΠΎΠΉ ΠΎΡΡΠ°Π½ΠΎΠ²Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ.ΠΡΠ±ΠΎΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ ΠΎΡΡΠ°Π½ΠΎΠ²Π° - ΠΏΠ»ΠΎΡ Π°Ρ ΡΡΡΠ°ΡΠ΅Π³ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈ Π΅Π΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π±Π΅Π· Π°Π½Π°Π»ΠΈΠ·Π°.
ΠΡΠΎΡΡΠΈΡΠ΅ 10 ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° (ΠΈΠ»ΠΈ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ), ΠΏΠΎΠΌΠΎΠ³Π°Ρ Π½Π°ΠΌ Π±ΡΡΡΡΠΎ ΠΈ ΡΠΎΡΠ½ΠΎ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΠ·ΠΊΠΈΠ΅ ΠΌΠ΅ΡΡΠ°.
Π§ΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² Google Chrome, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡ (ΠΊΠ°ΠΊ LambdaTest ΠΎΡΠΊΡΡΠ²Π°Π»ΡΡ Π² ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ).
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΡΠΎΠ²Π΅ΡΠΈΡΡ .
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅, ΠΏΠΎΡΠ»Π΅ ΠΎΡΠΊΡΡΡΠΈΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ.
ΠΡΠΊΡΠΎΠ΅ΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ. ΠΠ΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π° ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ·ΠΊΠΈΠ΅ ΠΌΠ΅ΡΡΠ°.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ / ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠ°Π½Π° (Π²Π΅ΡΡ Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ). ΠΡΠ° ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π°, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΠ΄ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΊΡΠ°Π½Π°. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ ΠΌΡΠ»ΡΡΠΈΠΌΠ΅Π΄ΠΈΠ°.
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΡΠ°Π»ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π²ΠΎ Π²ΡΠ΅ΠΌ ΠΌΠΈΡΠ΅. Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΡΡΠ°ΡΠ΅Π³ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠ΅Π³Π΄Π° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ°ΡΠ΅Π³ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π΄Π»Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΡΠΎ ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π½Π° Π²ΡΠΎΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π² ΡΠΏΠΈΡΠΊΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡ Π²Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΡΠ½ΠΈΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ Π΄Π²ΠΈΠ³Π°ΠΉΡΠ΅ΡΡ Π²Π²Π΅ΡΡ ΠΏΠΎ ΡΠ΅ΠΏΠΎΡΠΊΠ΅ (ΠΈΠ»ΠΈ Π½Π°Π·Π°Π΄ Π²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ). Π’Π°ΠΊΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π²ΡΠ΅Π³Π΄Π° Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π²Π°ΡΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½Ρ, Π° ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π²Π°ΠΌΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ.ΠΠ»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ LT-Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ.
ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅, ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π΄Π»Ρ Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS Media Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Π°. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Internet Explorer ΠΈ Mozilla Firefox.
ΠΠΏΡΡΡ ΠΆΠ΅, Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ, ΠΈ Π΅ΡΡΡ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.Π§ΡΠΎ ΠΆ, Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ ΠΎ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Π΄Π»Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS.
ΠΠ°Π²Π΅ΡΡΠ΅Π½ΠΈΠ΅!
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ CSS
- ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ Π΄ΡΡΠ³ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΠΈ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ. ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, Ρ ΠΎΡΡ ΠΈ Π½Π°ΡΠΈΠ½Π°Π»ΠΈΡΡ Π³ΡΡΠ±ΠΎ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΈΡΡΠ΅ΡΠΏΡΠ²Π°ΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ ΠΈ ββΠ²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ ΠΎΡΠ²Π΅ΡΠ΅Π½Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅Π»ΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΈ ΡΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±ΠΈΡΡΡΡ Ρ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΏΡΠ°Π²ΠΈΠ» ΠΈ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.ΠΠ΅Π½Ρ ΠΏΠΎΡΠ°ΠΆΠ°Π΅Ρ ΡΠ°ΠΊΠΎΠΉ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° Codepen ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΡΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ. ΠΠΎΠ΄Ρ ΠΎΠ΄Ρ ΠΊ ΠΊΠΎΠ½ΡΡ ΠΏΠΎΡΡΠ°, ΠΌΡ ΠΏΡΠΈΠ·ΡΠ²Π°Π΅ΠΌ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Π² ΡΠ°Π·Π΄Π΅Π»Π°Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΈ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π»ΡΡΡΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ Π² ΡΡΠΎΡ ΠΏΠΎΡΡ. ΠΠ°Π΄Π΅ΡΡΡ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΡΡ ΡΠ°Π±ΠΎΡΡ!
Π₯Π°ΡΠΈΡ Π Π°Π΄ΠΆΠΎΡΠ°
Π― ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ ΠΏΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΊΠ΅. ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΠ°ΡΡΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅ΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΌΠΈΡΠ°. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ Π½Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°, ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, ΡΡΠΎΠ±Ρ Ρ ΠΎΡΡ ΠΊΠ°ΠΊ-ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΌΠΈΡ.ΠΠΎΠΌΠΈΠΌΠΎ ΠΌΠΎΠ΅ΠΉ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ, Ρ ΠΎΡΠ΅Π½Ρ Π»ΡΠ±Π»Ρ ΡΠΈΡΠ°ΡΡ ΠΊΠ½ΠΈΠ³ΠΈ ΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΠΈΡΡ Π½Π° https://www.themeaninglesslife.com.
.