ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ CSS z-index — CSS
ΠΠ±ΡΡΠ½ΠΎ HTML ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ Π΄Π²ΡΡ
ΠΌΠ΅ΡΠ½ΡΠΌΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ΅ΠΊΡΡ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±Π΅Π· ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΡ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΅Π΄ΠΈΠ½ΡΠΉ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ (rendering flow) ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ·Π±Π΅Π³Π°ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, Π·Π°Π½ΡΡΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΠΌΠΈ.z-index
Π°ΡΡΠΈΠ±ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π° Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° (rendering content).
Π CSS 2.1, ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±ΡΠ»Π° Π² ΡΡΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΊ ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π±Π»ΠΎΠΊΠΈ Π»Π΅ΠΆΠ°Π»ΠΈ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ «z» ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠΈ «z» ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π°ΠΊΡΡΠ°Π»ΡΠ½Π°, ΠΊΠΎΠ³Π΄Π° Π±Π»ΠΎΠΊΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
(from CSS 2.1 Section 9.9.1 — Layered presentation)
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΡΠΈΠ»Ρ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊΠΈ Π½Π° ΡΠ»ΠΎΡΡ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠΌΡ ΡΠ»ΠΎΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° (ΡΠ»ΠΎΠΉ 0). ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Z ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ Π²ΡΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠ΅Π΅ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ z-index ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΡΠΎΡΡΡΠΌ: ΠΎΠ΄Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠ΄Π½ΠΎ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, Ρ ΠΏΡΠΎΡΡΡΠΌ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° z-index ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»ΠΎΠΆΠ½ΡΠΌ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML, Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ΄Π½ΠΎ ΠΏΠΎΠ½ΡΡΡ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·Π°ΡΡ. ΠΡΠΎ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ ΡΠ΅Π»ΡΠΌ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠΎΠΌ ΠΏΡΠ°Π²ΠΈΠ» «ΡΠΊΠ»Π°Π΄ΠΊΠΈ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS-2.1 Appendix E (CSS-2.1 ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π) Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½ ΡΠ΅Π»ΡΠΉ ΡΠ°Π·Π΄Π΅Π», ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠ±ΡΡΡΠ½ΡΡΡΠΈΠΉ ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π°.
ΠΠ°Π½Π½Π°Ρ ΡΡΠ°ΡΡΡ ΠΏΠΎΠΏΡΡΠ°Π΅ΡΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π°, Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ.
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π΅Π· z-ΠΈΠ½Π΄Π΅ΠΊΡΠ° : ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ float : ΠΊΠ°ΠΊ ΡΠ΅Π±Ρ ΠΏΠΎΠ²ΠΎΠ΄ΡΡ float ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ c ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ z-index : Using z-index to change default stacking
- The stacking context : Notes on the stacking context
- Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
- Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
- Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅
- ΠΠ²ΡΠΎΡ: Paolo Lombardi
- ΠΡΠ° ΡΡΠ°ΡΡΡ — Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΡ Ρ Π½Π°ΠΏΠΈΡΠ°Π» Π½Π° ΠΈΡΠ°Π»ΡΡΠ½ΡΠΊΠΎΠΌ Π΄Π»Ρ YappY. Π― Π΄Π°Ρ ΠΏΡΠ°Π²ΠΎ Π΄Π΅Π»ΠΈΡΡΡΡ Π²ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ: Creative Commons: Attribution-Sharealike license
- ΠΠ°ΡΠ° ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: 9 ΠΈΡΠ»Ρ 2005 Π³.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ Π°Π²ΡΠΎΡΠ°: ΡΠΏΠ°ΡΠΈΠ±ΠΎ ΠΠ»Π°Π΄ΠΈΠΌΠΈΡΡ ΠΠ°Π»Π°Π½ΡΡ ΠΈ Π ΠΎΠ΄Ρ Π£Π°ΠΉΡΠ»ΠΈ Π·Π° ΠΎΠ±Π·ΠΎΡ.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved? Learn
how to contribute.
This page was last modified on by MDN contributors.
ΠΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ — CSS | MDN
ΠΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ:
- ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
inherit
ΠΈinitial
, Π° ΡΠ°ΠΊΠΆΠ΅ - ΠΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΡ
Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π² ΡΡΡΠΎΠΊΠ΅ «ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ» Π² ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΡΡΠΈΡΠ»Π΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΡΠ½ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°Ρ
ΠΎΠ΄ΡΡΠΈΠ΅ΡΡ Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ
em
ΠΈΠ»ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
) Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΊΠ°Π·Π°Π½Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ font-size: 16px
ΠΈ padding-top: 2em
, ΡΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ padding-top
Π±ΡΠ΄Π΅Ρ 32px
(Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°).
ΠΠ΄Π½Π°ΠΊΠΎ, Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² (ΡΠ°ΠΊΠΈΡ
, Π³Π΄Π΅ ΠΏΡΠΎΡΠ΅Π½ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Ρ ΠΊ ΡΠ΅ΠΌΡ-ΡΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ Π»ΡΠΉΠ°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ(ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ) Π³ΡΠ°Π½ΠΈΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, width
, margin-right
, text-indent
ΠΈ top
), ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π±Π΅Π·ΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠ΅ ΡΠΈΡΠ»Π°, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ line-height
ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ. ΠΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΡΠ°Π»ΠΈΡΡ Π² Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
, ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ (en-US) ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΡΠ΅ΡΠ° ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ** Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ** (ΠΊΡΠΎΠΌΠ΅ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ «ΡΠ°Π³Π°» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ) ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ inherit
.
DOM API getComputedStyle()
Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠ΅ΡΡΠ½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΠΈΠ±ΠΎ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΡΠΌ
ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ | Π‘ΡΠ°ΡΡΡ | ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ |
---|---|---|
CSS LevelΒ 2 (RevisionΒ 1) ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ‘computed value’ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. | Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ | ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ |
- Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ CSS
- ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ CSS
- Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
- @-ΠΏΡΠ°Π²ΠΈΠ»Π°
- ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
- ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΡ
- Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅
- Π±Π»ΠΎΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
- ΡΠ΅ΠΆΠΈΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ
- ΠΌΠΎΠ΄Π΅Π»ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ
- Π‘Ρ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ²
- ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅
- Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅
- ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅
- Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅
- Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ (en-US)
- Π‘ΠΎΠΊΡΠ°ΡΡΠ½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°
- ΠΠ°ΠΌΠ΅ΡΠ°Π΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved? Learn
how to contribute.
This page was last modified on by MDN contributors.
ΠΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΊΠΎΠΉ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° CSS β Smashing Magazine
- 13 ΠΌΠΈΠ½ ΡΡΠ΅Π½ΠΈΡ
- CSS, ΠΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΡΠ°ΡΠ·Π΅ΡΡ, ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
- ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Π² Twitter, LinkedIn
ΠΠ± Π°Π²ΡΠΎΡΠ΅
ΠΠ»Π°Π΄ Π¨Π΅Ρ ΡΠ΅Ρ β Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ, ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΠΈΠΉΡΡ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ Π°ΡΡ ΠΈΡΠ΅ΠΊΡΡΡΠ΅ CSS ΠΈ HTML. ΠΠΎΠ»ΡΡΠ΅ ΠΎ ΠΠ»Π°Π΄ β¬ Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ? Π ΡΠ΅ΠΌ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅? Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΠ»Π°Π΄ Π¨Π΅Ρ ΡΠ΅Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΏΠΎΡΠ΅ΠΌΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS Π½Π΅ ΡΠ°ΠΊΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅.ΠΠΎΠ³Π΄Π° ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΠΈΠ·ΡΡΠ°ΡΡ CSS, ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSS ΠΏΠΎΠ΄ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡΡ Π½Π° ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ ΠΈ Π΄ΡΠΉΠΌΡ. ΠΠΎ Ρ Π³ΠΎΠ΄Π°ΠΌΠΈ Π²ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π² CSS ΡΡΡΠ°ΡΠΈΠ»ΠΈ ΡΠ²ΡΠ·Ρ Ρ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΌΠΈΡΠΎΠΌ ΠΈ ΡΡΠ°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ %
, em
, rem
, Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ( vw
ΠΈ vh
) ΠΈ Π΄ΡΡΠ³ΠΈΠ΅. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ ( ΠΏΠΈΠΊΡ.
). ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡ ( ΡΠΌ
) ΠΈ Π΄ΡΠΉΠΌ ( Π²
).
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΏΠΎΡΠ΅ΠΌΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS Π½Π΅ ΡΠ°ΠΊΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅.
ΠΠΈΠΊΡΠ΅Π»ΠΈ CSS
ΠΠΈΠΊΡΠ΅Π»ΠΈ Π±ΡΠ»ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅ΠΉ CSS, Π²ΠΎΡΡ ΠΎΠ΄ΡΡΠ΅ΠΉ ΠΊ Π·Π°ΡΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. Π ΡΡΠ°ΡΠΎΠΌ ΠΌΠΈΡΠ΅ ΡΠΊΡΠ°Π½ΠΎΠ² Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ², Π΄ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ², ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΡΠΊΡΠ°Π½Π° Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»ΠΈ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ CSS.
Π 2007 Π³ΠΎΠ΄Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π° Π±ΡΠ»ΠΎ 1024
Γ 768
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π°Π²Π°Π»ΠΈ Π½Π°ΡΠΈΠΌ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ 1000
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π° ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΡΠΎΡ
ΡΠ°Π½ΡΠ»ΠΈΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΊΡΠ°Π½Ρ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ²
Π‘ΠΌΠ°ΡΡΡΠΎΠ½Ρ ΠΏΡΠΈΠ½Π΅ΡΠ»ΠΈ Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ ΡΠΈΡ
ΡΡ ΡΠ²ΠΎΠ»ΡΡΠΈΡ, Π½Π°ΡΠ°Π² ΡΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ. ΠΡΠ»ΠΈ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ iPhone 12 Pro, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½ 1170
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΡΠΈΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠ΅ 3
ΠΏΠΈΠΊΡΠ΅Π»Ρ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ ΠΊΠ°ΠΊ 1
ΠΏΠΈΠΊΡΠ΅Π»Ρ Π² CSS.
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΈΠ·ΠΌΠ΅ΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΠΌΡ ΠΈΠ·ΠΌΠ΅ΡΡΠ΅ΠΌ Π΅Π³ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ CSS, Π° Π½Π΅ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ΄Π²ΠΎΠ΄Ρ ΠΈΡΠΎΠ³:
- ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ CSS β ΡΡΠΎ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ .
- ΠΠΈΠΊΡΠ΅Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΡΠ²Π»ΡΡΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΠΌΠΈ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ .
Π₯ΠΎΡΠΎΡΠΎ, Π° ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²? ΠΠ½ΠΈ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ΅ΠΌ ΠΆΠ΅ ΡΡΠ°ΡΡΠΌ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± ΡΡΠΎΠΌ.
ΠΠΊΡΠ°Π½Ρ Π΄Π»Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΠ Π 2021 Π³ΠΎΠ΄Ρ
ΠΠΊΡΠ°Π½Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π² Π½ΠΎΡΡΠ±ΡΠΊΠ°Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ ΡΠΏΡΡΡΡ. MacBook 2014 Π³ΠΎΠ΄Π° ΠΏΠΎΠ»ΡΡΠΈΠ» ΠΏΠ΅ΡΠ²ΡΠ΅ ΡΠΊΡΠ°Π½Ρ Β«retinaΒ» (retina ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΠ½ΠΎΠ½ΠΈΠΌΠΎΠΌ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ).
Π Π½Π°ΡΠΈ Π΄Π½ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² ΠΈΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ MacBook :
- ΠΠΊΡΠ°Π½ 13,3-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠ³ΠΎ MacBook Pro ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ
2560
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ1440
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠ΅1,778
ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ1
Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ. - ΠΠΊΡΠ°Π½ 16-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠ³ΠΎ MacBook Pro ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ
3072
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ1792
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠ΅1,714
ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ1
Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ.
Π‘ΡΠ΅Π΄ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠΎΠ² ΠΠ Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π» Π΄Π²Π° 15,6-Π΄ΡΠΉΠΌΠΎΠ²ΡΡ ΡΠΊΡΠ°Π½Π°, ΠΎΠ΄ΠΈΠ½ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Full HD, Π° Π΄ΡΡΠ³ΠΎΠΉ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 4K. Π Π΅Π·ΡΠ»ΡΡΠ°ΡΡ Π±ΡΠ»ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ:
- ΠΠΊΡΠ°Π½ Ρ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΡ 15,6 Π΄ΡΠΉΠΌΠ° ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Full HD ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ
1920
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ1536
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠ΅1,25
ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ1
Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ. - ΠΠΊΡΠ°Π½ 15,6-Π΄ΡΠΉΠΌΠΎΠ²ΡΠΉ 4K ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ
3840
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΠΊΠ°ΠΊ1536
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠ΅2,5
ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ1
Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ.
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΠ²ΡΠ·Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠΌΠΈ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ (Ρ. Π΅. ΡΡΡΡΠΎΠΉΡΡΠ²Π°) ΠΈ CSS (Ρ. Π΅. Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ) ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΠΏΠΎΡΡΠΈ ΠΈΡΡΠ΅Π·Π»Π°.
Π‘ Π³ΠΎΠ΄Π°ΠΌΠΈ ΡΠΊΡΠ°Π½Ρ ΡΡΠ°Π»ΠΈ ΠΏΠ»ΠΎΡΠ½Π΅Π΅
Π ΠΏΡΠΎΡΠ»ΠΎΠΌ, Π΅ΡΠ»ΠΈ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠΊΡΠ°Π½, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΅Π³ΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. ΠΠΎΠ³Π΄Π° ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΠ»ΡΡΡΠΈΠ»Π°ΡΡ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ Π½Π°ΡΠ°Π»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΊΡΠ°Π½Ρ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ.
Π Π°Π½ΡΡΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΠ»ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ ΡΠΊΡΠ°Π½Ρ, Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. (ΠΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠ΅Π²ΡΡ)Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅ : Π§ΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠΊΠ»Π°Π΄Π½Π°Ρ ΠΏΠ°ΡΡΠΈΠ½Π°?
ΠΠΎΡΠ΅ΠΌΡ ΠΌΡ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΠΌ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ?
Π‘ Π³ΠΎΠ΄Π°ΠΌΠΈ, ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΊΡΠ°Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡ ΠΏΠ»ΠΎΡΠ½Π΅Π΅, ΠΌΡ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΠΊΡΠ°Π½Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ°Π΄ΡΠΌΠ°ΠΉΡΠ΅ΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π½Π° ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Samsung Galaxy S21 Ultra . ΠΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ·ΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1440
ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π°. ΠΠΎ Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΈ, ΡΠ΅ΠΊΡΡ Π±ΡΠ» Π±Ρ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π»ΠΊΠΈΠΌ, ΡΡΠΎ Π΅Π³ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ. ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΎΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΠΎΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π Π°Π·ΠΌΠ΅ΡΡ Π² CSS (ΡΠΎ Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°) ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ CSS. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ , ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊ:
ΠΠ, ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS Π½Π΅ ΡΠ°Π²Π½Ρ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ ΠΈ Π΄ΡΠΉΠΌΡ. ΠΡΠΎ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΌΠΈΡΠΎΠΌ, Π²Π΅ΡΠ½ΠΎ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΠΈΡ .
ΠΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΏΡΡΠΆΠΊΠ°! ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΡΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅Β β
CSS-Π΄ΡΠΉΠΌΡ ΠΈ CSS-ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ
ΠΠ΅Π·Π΄Π΅, Π³Π΄Π΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄ΡΠΉΠΌΡ ΠΈ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ, ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ.
Π£ ΠΌΠ΅Π½Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΌΡΡΠ»Ρ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS Π½Π΅ ΡΠ°Π²Π½Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡΠ»ΠΎ Π±Ρ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄ΡΠΉΠΌΡ ΠΈ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ. ΠΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, Π²Π΅ΡΠ½ΠΎ?
Π§ΡΠΎΠ±Ρ Π±ΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Π½ΡΠΌ, Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΠ» ΡΡΠΎ. Π― ΡΠΎΠ·Π΄Π°Π» ΠΊΠΎΡΠΎΠ±ΠΊΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ 1 ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡ ΠΈ Π·Π°Π΄Π°Π» Π΅ΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°. Π― ΡΡ Π²Π°ΡΠΈΠ» Π½Π°ΡΡΠΎΡΡΡΡ ΡΡΠ»Π΅ΡΠΊΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΠ» ΡΡΡΠΏΡΠΈΠ·:
Π‘Π°Π½ΡΠΈΠΌΠ΅ΡΡ CSS Π½Π΅ ΡΠ°Π²Π΅Π½ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ.
ΠΠΎΡ ΡΠ΅ΡΡΠΈΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠ° CSS Ρ ΡΡΠ»Π΅ΡΠΊΠΎΠΉ Π½Π° 13-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠΌ MacBook ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ 2019 Π³ΠΎΠ΄Π°:
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡ CSS ΡΠ²Π½ΠΎ Π½Π΅ ΡΠ°Π²Π΅Π½ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ. (ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΎ ΠΠ»Π°Π΄ΠΎΠΌ Π¨Π΅Ρ ΡΠ΅ΡΠΎΠΌ) (ΠΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ)Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠΎΡ ΠΆΠ΅ Π΄Π»Ρ Π΄ΡΠΉΠΌΠΎΠ² CSS:
ΠΡΠΉΠΌ CSS Π½Π΅ ΡΠ°Π²Π΅Π½ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ Π΄ΡΠΉΠΌΡ.
Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΏΠΈΠΊΠ°ΠΌ ( ΡΡ.
) ΠΈ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡΠ°ΠΌ ( ΠΌΠΌ
). ΠΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΡΠ°ΡΡΠΈ Π»ΠΈΠ±ΠΎ Π΄ΡΠΉΠΌΠ° CSS, Π»ΠΈΠ±ΠΎ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠ° CSS, Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
Π½Π΅ ΡΠ²ΡΠ·Π°Π½ Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ Π΄ΡΠΉΠΌΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠΎΠΌ.
ΠΠΎΡΠ΅ΠΌΡ Π΄ΡΠΉΠΌΡ ΠΈ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ CSS Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΠΌΠΈ Π΄ΡΠΉΠΌΠ°ΠΌΠΈ ΠΈ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠ°ΠΌΠΈ
Π‘ 1980-Ρ
Π³ΠΎΠ΄ΠΎΠ² Π½Π° ΡΡΠ½ΠΊΠ΅ ΠΠ Π΄ΡΠΉΠΌ CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ 96
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΎΡ ΡΠ°ΡΡΠ΅Ρ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π±ΡΠ» Π½Π°ΠΏΡΡΠΌΡΡ ΡΠ²ΡΠ·Π°Π½ ΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ DPI/PPI (ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° Π΄ΡΠΉΠΌ) ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ Microsoft Windows Π΄Π»Ρ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ² ΡΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠΌΠ΅Π» ΡΡΠ°Π½Π΄Π°ΡΡ 9.0021 96 ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ.
ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π»ΠΎ, ΡΡΠΎ 1
Π΄ΡΠΉΠΌΠ° CSS Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½Ρ 96
ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ CSS.
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠΎΠ² CSS, ΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈΠ· Π΄ΡΠΉΠΌΠΎΠ², Π° ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ 1
Π΄ΡΠΉΠΌΠ° ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ 2,54
ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠ΅ 1
ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠ° CSS Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΡΠ°Π²Π½Ρ 37,7952756
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ CSS.
ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ: 1 ΡΠΌ = 37,7952756 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (96 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ / 2,54)
.
Π‘ΠΌ. Pen [Π Π΅Π°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ CSS!] (https://codepen.io/smashingmag/pen/BaRJvWj) ΠΠ»Π°Π΄Π° Π¨Π΅Ρ ΡΠ΅ΡΠ°.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ΅Π°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Pen CSS! ΠΠ»Π°Π΄ Π¨Π΅Ρ ΡΠ΅Ρ.ΠΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠ°Π·Π°Π²ΡΠ΅Π΅ΡΡ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ Π½Π° Π·Π°ΡΠ΅ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ ΠΠ (Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ» ΠΊΠ°ΠΊ Π±Ρ ΠΎΠ΄ΠΈΠ½ ΡΡΠ°Π½Π΄Π°ΡΡ), ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ ΠΏΠ»ΠΎΡ ΠΈΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΎ Π΄ΡΠΉΠΌΡ ΠΈ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ CSS ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌΠΈ ΠΈ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ (ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΡΠ΅ΡΠΈ).
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² 1980-Ρ
Ρ Apple Π±ΡΠ» Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠ°Π½Π΄Π°ΡΡ 72
DPI Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ².
ΠΠΈΠΊΡΠ΅Π»ΠΈ ΡΠΊΡΠ°Π½Π° ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΏΠ»ΠΎΡΠ½Π΅Π΅
ΠΠ°ΠΊ Ρ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π», DPI ΡΠΊΡΠ°Π½ΠΎΠ² Ρ Π³ΠΎΠ΄Π°ΠΌΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΡΡ ΠΏΠ»ΠΎΡΠ½Π΅Π΅, ΠΈ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΠΊΡΠ°Π½Ρ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡ 120
Π΄ΠΎ 160
DPI. Π ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ 1
Π΄ΡΠΉΠΌΠΎΠ² CSS Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π²Π½ΡΠ΅ΡΡΡ 96
ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ CSS, ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΄ΡΠΉΠΌ CSS Π½Π΅ ΡΠ°Π²Π΅Π½ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ Π΄ΡΠΉΠΌΡ.
ΠΠ΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π°Π»Π»ΠΎΠ² CSS
ΠΠ΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π°Π»Π»ΠΎΠ² ( pt
) ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ
Π΅Π΄ΠΈΠ½ΠΈΡ CSS. ΠΠ°ΠΊ Π³Π»Π°ΡΠΈΡ ΠΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΡ:
Β«Π ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ΅ ΡΠΎΡΠΊΠ° β ΡΡΠΎ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°, ΠΈΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆΠ° ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΏΠ΅ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅Β».
ΠΠ° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π»ΠΈΠ½Π΅ΠΉΠΊΠ° ΡΠΎ ΡΠΊΠ°Π»ΠΎΠΉ ΡΠΎΡΠ΅ΠΊ Π²Π½ΠΈΠ·Ρ ΠΈ ΡΠΊΠ°Π»ΠΎΠΉ Π² Π΄ΡΠΉΠΌΠ°Ρ Π²Π²Π΅ΡΡ Ρ:
(ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΎ ΠΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠ΅ΠΉ) (ΠΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ)ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠΎΠΌΡ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠ° Π΅Π΄ΠΈΠ½ΠΈΡΠ° Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅ΠΉ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ².
PPI ΠΈ DPI
ΠΡ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ DPI, ΠΈ Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ»ΡΡΠ°Π»ΠΈ ΡΡΠΈ ΡΠ΅ΡΠΌΠΈΠ½Ρ Π² ΠΏΡΠΎΡΠ»ΠΎΠΌ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ΠΈ ΠΎΠ·Π½Π°ΡΠ°ΡΡ, Π²ΠΎΡ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ:
- PPI
ΠΠΊΡΠ°Π½Ρ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠ²Π΅ΡΠ»ΡΡ ΡΠΎΡΠ΅ΠΊ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ. Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅ΡΠΈΡΡ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΌΡ ΠΏΠΎΠ΄ΡΡΠΈΡΡΠ²Π°Π΅ΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ 1 Π΄ΡΠΉΠΌΡ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠΌΡ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ Π½Π° Π΄ΡΠΉΠΌ (PPI). - DPI
ΠΡΠΈΠ½ΡΠ΅ΡΡ ΠΏΠ΅ΡΠ°ΡΠ°ΡΡ ΡΠ²Π΅ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ. Π§ΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΡΠΎΡΠ΅ΠΊ ΠΏΡΠΈΠ½ΡΠ΅ΡΠ°, ΠΌΡ ΠΏΠΎΠ΄ΡΡΠΈΡΡΠ²Π°Π΅ΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΡΠ΅ΠΊ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ 1 Π΄ΡΠΉΠΌΡ Π±ΡΠΌΠ°Π³ΠΈ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ (DPI).
ΠΠΎΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΡΡΠΎ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΌΠ΅ΡΡΠΈΡΡ Π½Π° 1 Π΄ΡΠΉΠΌΠ΅.
- PPI : ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° Π΄ΡΠΉΠΌ (Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ²)
- DPI : ΡΠΎΡΠ΅ΠΊ Π½Π° Π΄ΡΠΉΠΌ (Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ²)
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠΎΡΠ΅ΠΊ CSS Π² 1
Π΄ΡΠΉΠΌΠ° ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊΠ°ΠΊ ΠΊ ΡΠΈΡΠΈΠ½Π΅, ΡΠ°ΠΊ ΠΈ ΠΊ Π²ΡΡΠΎΡΠ΅. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅ Ρ 96
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° Π΄ΡΠΉΠΌ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Ρ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ 1
Π΄ΡΠΉΠΌΠΎΠ² Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ±ΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ 9216
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ( 96
Γ 96
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ = 9216
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ).
ΠΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ 1
Π΄ΡΠΉΠΌΠΎΠ² Ρ ΡΠΊΡΠ°Π½ΠΎΠΌ 10
PPI:
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠ΅Π°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΠ΅ΡΠΎΠ² CSS PPI:
CSS Resolution (Pixels) | CSS PPI | CSS Inches (width and height) |
---|---|---|
96×96 | 96 | 1Γ1 |
141Γ141 | 141 | 1Γ1 |
Β«DPIΒ» Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ²
ΠΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π²ΡΡΠ°ΠΆΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π° Π² DPI, Π° Π½Π΅ Π² PPI. ΠΠΎ ΠΏΡΡΡΡ Π²Π°Ρ ΡΡΠΎ Π½Π΅ ΡΠΌΡΡΠ°Π΅Ρ: ΠΡΠΎ Π²ΡΠ΅Π³Π΄Π° PPI Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ DPI Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ² .
Π‘ΡΠ°Π½Π΄Π°ΡΡΡ DPI/PPI
ΠΠ»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΡΠ΅Ρ
ΡΡΠΈΡ
ΡΠΎΡΠ΅ΠΊ ΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΡΠΊΠ° ( pt
).
ΠΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ DPI ΠΏΡΠΈΠ½ΡΠ΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅, ΠΎΠΏΡΡΡ ΠΆΠ΅, Π±ΡΠ»ΠΎ ΠΏΡΠΈΠ½ΡΡΠΎ Π² 1980-Ρ
Π³ΠΎΠ΄Π°Ρ
ΠΈ ΡΠ°Π²Π½ΠΎ 72
DPI. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ 1
Π΄ΡΠΉΠΌΠ° CSS Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π²Π½ΠΎ 72
ΠΏΡΠ½ΠΊΡΠ°ΠΌ.
-
1
Π΄ΡΠΉΠΌΠ° =72
ΡΠΎΡΠΊΠΈ -
1
ΡΠΎΡΠΊΠΈ =1/72
nd ΠΈΠ·1
Π΄ΡΠΉΠΌΠ°
ΠΠΈΠΊΡΠ΅Π»ΠΈ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, ΡΠΎΡΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ²
ΠΠ»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π΅Π΄ΠΈΠ½ΠΈΡΠ° DPI Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ΅Π±-DPI ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ ( 96
DPI), ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²ΡΡΠΈΡΠ»ΡΠ»ΠΈ CSS-Π΄ΡΠΉΠΌ ΠΈ CSS-ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡ. ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ Π½Π΅Ρ ΠΏΡΠΈΡΠΈΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠ΅ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : 1
ΡΠΎΡΠΊΠ° Π½Π΅ ΡΠ°Π²Π½Π° (CSS) ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ.
-
1
ΡΠΎΡΠΊΠ° =1,333
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ -
72
Π±Π°Π»Π»ΠΎΠ² =1
Π΄ΡΠΉΠΌΠ° -
72
ΠΎΡΠΊΠΎΠ² =96
ΠΠΈΠΊΡΠ΅Π»ΠΈ
ΠΡΠΈΠ½ΡΠ΅ΡΡ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Ρ ΠΎΡΠ΅Π» ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΏΠΎΡΠ΅ΠΌΡ. ΠΏΠ°ΡΡΠΈΠ½Π°. ΠΠΎ ΠΊΠ°ΠΊ Π½Π°ΡΡΠ΅Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ²? ΠΡΡΡ Π»ΠΈ ΠΏΡΠΈΡΠΈΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΠΉΠΌΡ, ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ ΠΈΠ»ΠΈ ΡΠΎΡΠΊΠΈ CSS Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ²?
ΠΠΎΠΉ ΡΠ΅ΡΡ ΠΏΠ΅ΡΠ°ΡΠΈ
Π― ΠΏΡΠΎΠ²Π΅Π» Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π»ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡ DPI 1980-Ρ
Π³ΠΎΠ΄ΠΎΠ² Π½Π° ΠΏΡΠΈΠ½ΡΠ΅ΡΠ°Ρ
. Π― ΡΠΎΠ·Π΄Π°Π» Π΄Π²Π° ΡΡΠΈΠΊΠ°: ΠΎΠ΄ΠΈΠ½ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ 72
ΡΠΎΡΠΊΠΈ, Π° Π²ΡΠΎΡΠΎΠΉ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ 1
Π΄ΡΠΉΠΌΠ°.
ΠΡΠΈ Π΄Π²Π΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ Ρ ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΠ°Π» Π½Π° Π»Π°Π·Π΅ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠ½ΡΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠΎΠΈΡ Ρ ΠΌΠ΅Π½Ρ Π² ΠΎΡΠΈΡΠ΅. ΠΠΎΡ ΠΌΠΎΠΉ Codepen Π΄Π»Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΡΠ΅ΠΊ ΠΈ Π΄ΡΠΉΠΌΠΎΠ² Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ²:
Π‘ΠΌ. Pen [1 Π΄ΡΠΉΠΌ] (https://codepen. io/smashingmag/pen/ZEKxMMy) ΠΎΡ Elad Shechter.
Π‘ΠΌ. Pen 1 Π΄ΡΠΉΠΌ ΠΎΡ ΠΠ»Π°Π΄Π° Π¨Π΅Ρ ΡΠ΅ΡΠ°.Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Π― ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΠ°Π» ΡΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½Π° Π»Π°Π·Π΅ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠ½ΡΠ΅ΡΠ΅. Π ΠΌΠΎΠ΅ΠΌΡ ΡΠ΄ΠΈΠ²Π»Π΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ 72
ΡΠΎΡΠΊΠΈ (ΠΈΠ»ΠΈ 1
Π΄ΡΠΉΠΌΠ°), Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ ΡΠΎΠ²Π½ΠΎ 1
Π΄ΡΠΉΠΌΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ², Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²ΡΠ΅ Π΅ΡΠ΅ Π΅ΡΡΡ Π²Π΅ΡΠΊΠ°Ρ ΠΏΡΠΈΡΠΈΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠ½ΠΊΡΡ, Π΄ΡΠΉΠΌΡ ΠΈ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ.
ΠΡΠΈΠ½ΡΠ΅ΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ°ΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ DPI, Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈΠ½ΡΠ΅ΡΠ° 100%
, ΡΠΎ 72
ΡΠΎΡΠΊΠΈ (ΠΈΠ»ΠΈ 1
Π΄ΡΠΉΠΌΠ°) CSS Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΡΡΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ Π΄ΡΠΉΠΌΡ.
ΠΠ°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ : ΠΡΠ° ΡΡΠ°ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΊ ΡΠ΅ΡΠΈ, Π° Π½Π΅ ΠΊ ΠΏΡΠΈΠ½ΡΠ΅ΡΠ°ΠΌ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΌΠΎΠ³ΡΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠ°Ρ ΠΏΡΠΈΠ½ΡΠ΅ΡΠΎΠ².
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ : ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ² HSL Π² CSS
ΠΠΎΠΏΡΡΠΊΠ° ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅
ΠΡΠ»ΠΈ ΠΌΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° 16-Π΄ΡΠΉΠΌΠΎΠ²ΡΠΉ MacBook Pro, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ 1,714
ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΠΏΠΈΠΊΡΠ΅Π»Ρ. 1
ΠΠΈΠΊΡΠ΅Π»Ρ CSS, ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
ΠΡΠ»ΠΈ ΠΌΡ ΠΏΠΎΠΏΡΡΠ°Π΅ΠΌΡΡ ΡΠ³Π°Π΄Π°ΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π½Π° 16-Π΄ΡΠΉΠΌΠΎΠ²ΠΎΠΌ MacBook Pro, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ JavaScript window.devicePixelRatio
, ΠΎΠ½ΠΎ Π²Π΅ΡΠ½Π΅Ρ Π½Π΅Π²Π΅ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ 2
Π²ΠΌΠ΅ΡΡΠΎ 1.714
. (Π ΡΡΠΎ Π±Π΅Π· ΡΡΠ΅ΡΠ° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ.)
ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ Π½Π°ΡΡΠΎΡΡΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS
ΠΠΎΠ³Π΄Π° ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΌΡ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS. ΠΠΎ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π²ΡΡΠ΅, Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠΌΠ°ΡΡΡΠΎΠ½ΠΎΠ² ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΡΠ½ΠΎΠ²ΡΠ²Π°ΡΡΡ Π½Π° ΡΡΠΎΠΌ, Ρ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠ΅ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»Ρ CSS (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°ΡΡΠΎΡΡΠΈΠ΅ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ ΠΈΠ»ΠΈ Π΄ΡΠΉΠΌΡ), ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΈΡΡΠΈΠ½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Firefox ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π» ΡΠ΅Π°Π»ΡΠ½ΡΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡΠ° ( mozmm ββ
), Π½ΠΎ ΡΠ΄Π°Π»ΠΈΠ» Π΅Π΅ Π² Π²Π΅ΡΡΠΈΠΈ 59. Π― Π½Π΅ Π·Π½Π°Ρ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ Π΅Π΅ ΡΠ΄Π°Π»ΠΈΠ»ΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΠ΅ΠΉ ΡΠΆΠ΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ CSS, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ em
ΠΈ rem 9.0022 Π΅Π΄. ΠΡΠ»ΠΈ Π±Ρ ΠΌΡ ΠΏΠΎΠΏΡΡΠ°Π»ΠΈΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π»ΠΎ Π±Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΡΠ΅ΠΌ ΡΠ΅ΡΠΈΠ»ΠΎ Π±Ρ.
ΠΠΎΡ ΠΎΠΆΠ΅, ΡΡΠΎ Π²Π΅Π±-ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ ΠΌΡΡΠ»ΠΈΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΡΡΠΎ Π΄Π°ΠΆΠ΅ Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° CSS ΠΏΠΎΡΠ΅ΡΡΠ»Π° ΡΠ²ΡΠ·Ρ Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ.
Π Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΡΠΈΡΠ°Π΅ΡΠ΅, ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ CSS β ΠΎΡΠ»ΠΈΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΠ΅ΠΌΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ, ΡΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΈΠ·ΠΌΠ΅ΡΡΠ΅Ρ ΡΡΠ° Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Ρ Π½Π°Ρ Π½Π΅Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² CSS.
ΠΡΠ°ΠΊ, CSS-ΠΏΠΈΠΊΡΠ΅Π»Ρ β Π½Π°ΠΈΡ ΡΠ΄ΡΠΈΠΉ ΡΠΈΠΏ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ .
ΠΠΎΠ΄Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΡΠΎΠ³ΠΎΠ²
Π Π½Π°ΡΠ°Π»Π΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ Ρ ΡΠΊΠ°Π·Π°Π», ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ CSS ΡΡΠ°Π»ΠΈ ΡΠ΅ΠΌ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°. ΠΡ Π½Π°ΡΠ°Π»ΠΈ Ρ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ CSS ΠΈ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ CSS ΠΈ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΈ, ΡΡΠΎ CSS-Π΄ΡΠΉΠΌΡ ΠΈ CSS-ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ Π½Π°ΠΏΡΡΠΌΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡΡΡΡ ΠΈΠ· CSS-ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π½Π΅ ΡΠ²ΡΠ·Π°Π½Ρ Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠΌΠΈ Π΄ΡΠΉΠΌΠ°ΠΌΠΈ ΠΈ ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠ°ΠΌΠΈ. Π ΠΊΠΎΠ½ΡΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅ ΠΏΠΎΠΉΠ½ΡΠ° ΠΈ, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠ° Π΅Π΄ΠΈΠ½ΠΈΡΠ° Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π²Π΅Π±Π°.
ΠΠ°ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π°
ΠΠΎΡ ΠΈ Π²ΡΠ΅. ΠΠ°Π΄Π΅ΡΡΡ, Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΈ Π²Ρ ΡΠ·Π½Π°Π»ΠΈ ΠΈΠ· ΠΌΠΎΠ΅Π³ΠΎ ΠΎΠΏΡΡΠ°. ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΡΠΎΡ ΠΏΠΎΡΡ, Ρ Π±ΡΠ» Π±Ρ ΠΏΡΠΈΠ·Π½Π°ΡΠ΅Π»Π΅Π½, Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΠ»ΡΡΠ°Π» ΠΎΠ± ΡΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΡΡ ΠΈΠΌ.
Π‘ΡΡΠ»ΠΊΠΈ
- Β«ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Ρ CSSΒ», Tim Chien, Robert Nyman, Mozilla Hacks
- Β«Dots Per InchΒ», Wikipedia
- Β«Point (Typography)Β», Wikipedia
- Β«CSS Values ββand UnitsΒ», W3C
Π‘ΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ β LabSrc
Π CSS, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: absolute, Π²Ρ ΡΠ°ΡΡΠΎ Π±ΡΠ΄Π΅ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΡ, ΡΡΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅Π»Π΅ΠΏΠΎΡΡΠΈΡΡΠ΅ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ ΡΡΠ°ΡΡΠ»ΠΈΠ²ΠΎ ΠΏΠ»Π°Π²Π°Π΅Ρ ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅, ΠΈΠ½ΠΎΠ³Π΄Π° Π΄Π°ΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π° ΠΊΠ°Π΄ΡΠΎΠΌ. ΠΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΠΏΡΠ³Π½ΡΡΡ Π²Π°Ρ ΠΎΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π½ΠΎ Ρ Π·Π΄Π΅ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ³ΠΎΠ²ΠΎΡΠΈΡΡ Π²Π°Ρ Π²Π΅ΡΠ½ΡΡΡΡΡ.
Π‘Π²ΠΎΠ΄ΠΊΠ°
- 1. Π§ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ?
- 2.
ΠΠ΅ ΡΡΠ°Π²ΡΡΠ΅ ΡΠ΅Π±Π΅Π½ΠΊΠ° Π² ΡΠ³ΠΎΠ»
- 2.1. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ
- 2.2. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ-ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ
ΠΠ·ΡΡΠ°Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Π½Π° ΡΠΎΡΡΠΌΠ΅, Π² ΠΊΠΎΡΠΎΡΡΡ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ, ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ position: absolute. ΠΡΠΎ ΡΠΈΡΠΎΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅. Π₯ΠΎΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ°ΡΡΠΎ Π½Π°Π±Π»ΡΠ΄Π°Π΅ΡΡΡ, ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΉ.
ΠΡΠ°Π²Π΄Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π° . ΠΡΠ»ΠΈ Π½ΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅ Π½Π°ΡΡΡΠΎΠ΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position, ΡΠΎ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΡΠ΅Π»ΠΎΠΌ. ΠΡΠΎ ΡΠΎ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π»ΡΠ΄Π΅ΠΉ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ Π²ΠΈΠ΄ΡΡ, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ CSS, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ ΡΠΎ ΡΡΠ°ΡΡΠ΅ΠΉ ΠΠ°ΠΊΠ΅Ρ CSS β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΎΡ W3schools.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΈ Π² ΡΠΎΠΏΡΡΡΡΠ²ΡΡΡΠ΅ΠΌ CSS ΠΏΠΎΠΊΠ°Π·Π°Π½ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: absolute. ΠΡ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div Π²ΡΡΠ΅Π» Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
#parent { Π³ΡΠ°Π½ΠΈΡΠ°: 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ, ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ; ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 4ΠΠ; ΠΏΠΎΠ»Π΅: 1em; } #ΡΠ΅Π±Π΅Π½ΠΎΠΊ { Π³ΡΠ°Π½ΠΈΡΠ°: 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ°; ΡΠ²Π΅Ρ ΡΠΈΠ½ΠΈΠΉ; ΡΠ²Π΅ΡΡ Ρ: 0; ΡΠ»Π΅Π²Π°: 0; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; }
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²ΡΡΠ°Π²Π»Π΅Π½ ΡΠ²ΠΎΠΈΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ.