MCP рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдХрдиреЗрдХреНрдЯ рдХрд░реЗрдВ тЖТ

рдЧрдгрдирд╛ рджрд░реНрдЬ рдХрд░реЗрдВ

рд╕реВрддреНрд░ (рдлреЙрд░реНрдореВрд▓рд╛)

рд╡рд┐рдЬреНрдЮрд╛рдкрди

рдкрд░рд┐рдгрд╛рдо

рд╕рдордХрдХреНрд╖ EM рдорд╛рди
1
em
рдкрд┐рдХреНрд╕реЗрд▓ рд╡реИрд▓реНрдпреВ 16 px
рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ 16 px
рдкрд░рд┐рдгрд╛рдо 1 em

PX рд╕реЗ EM рдХрдиреНрд╡рд░реНрдЯрд░ рдХреНрдпрд╛ рд╣реИ?

PX рд╕реЗ EM рдХрдиреНрд╡рд░реНрдЯрд░ рдкрд┐рдХреНрд╕реЗрд▓ рдорд╛рдк рдХреЛ CSS рдореЗрдВ рдЗрд╕реНрддреЗрдорд╛рд▓ рд╣реЛрдиреЗ рд╡рд╛рд▓реА em рдпреВрдирд┐рдЯ рдореЗрдВ рдмрджрд▓ рджреЗрддрд╛ рд╣реИред рдкрд┐рдХреНрд╕реЗрд▓ (px) рдПрдХ рдирд┐рд░рдкреЗрдХреНрд╖ (absolute) рдпреВрдирд┐рдЯ рд╣реИ, рдЬрдмрдХрд┐ em рдПрдХ рд╕рд╛рдкреЗрдХреНрд╖ (relative) рдпреВрдирд┐рдЯ рд╣реИ рдЬреЛ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рдЕрдиреБрд╕рд╛рд░ рд╕реНрдХреЗрд▓ рд╣реЛрддреА рд╣реИред em рдореЗрдВ рдбрд┐рдЬрд╝рд╛рдЗрди рдХрд░рдиреЗ рд╕реЗ рдЖрдкрдХрд╛ рд▓реЗрдЖрдЙрдЯ рдЬрд╝реНрдпрд╛рджрд╛ рд▓рдЪреАрд▓рд╛ рдФрд░ рд╕реБрд▓рдн рдмрдирддрд╛ рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ рдПрд▓рд┐рдореЗрдВрдЯ рдпреВрдЬрд╝рд░ рдХреА рдлрд╝реЙрдиреНрдЯ рдкреНрд░рд╛рдердорд┐рдХрддрд╛рдУрдВ рдХреЗ рд╕рд╛рде рдЦреБрдж-рдм-рдЦреБрдж рдмрдврд╝рддреЗ-рдШрдЯрддреЗ рд╣реИрдВред

рдЗрд╕рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХреИрд╕реЗ рдХрд░реЗрдВ

рдЬрд┐рд╕ рдкрд┐рдХреНрд╕реЗрд▓ рд╡реИрд▓реНрдпреВ рдХреЛ рдмрджрд▓рдирд╛ рд╣реИ рдЙрд╕реЗ рджрд░реНрдЬ рдХрд░реЗрдВ рдФрд░ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдкрд┐рдХреНрд╕реЗрд▓ рдореЗрдВ рдбрд╛рд▓реЗрдВред рдЬрд╝реНрдпрд╛рджрд╛рддрд░ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдореЗрдВ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдЯ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ 16px рд╣реЛрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЖрдорддреМрд░ рдкрд░ рдмреЗрд╕ 16 рд╣реА рд░рдЦрд╛ рдЬрд╛рддрд╛ рд╣реИред рд╕рдордХрдХреНрд╖ em рдорд╛рди рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдХреИрд▓рдХреБрд▓реЗрдЯ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВред

рдлрд╝реЙрд░реНрдореВрд▓рд╛ рд╕рдордЭреЗрдВ

рдпрд╣ рдХрдиреНрд╡рд░реНрдЬрд╝рди рдПрдХ рд╕реАрдзрд╛ рднрд╛рдЧ (division) рд╣реИ:

$$\text{EM} = \frac{\text{Pixel value (px)}}{\text{Base font size (px)}}$$

рдЕрдЧрд░ рдЖрдкрдХрд╛ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ 16px рд╣реИ, рддреЛ 16px рдмрд░рд╛рдмрд░ 1em рд╣реЛрдЧрд╛, 24px рдмрд░рд╛рдмрд░ 1.5em рдФрд░ 8px рдмрд░рд╛рдмрд░ 0.5emред рд╕рд╣реА рдмреЗрд╕ рдЪреБрдирдирд╛ рдмрд╣реБрдд рдЬрд╝рд░реВрд░реА рд╣реИ: em рдкреИрд░реЗрдВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддрд╛ рд╣реИ, рдЬреЛ рд░реВрдЯ рд╕реЗ рдЕрд▓рдЧ рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

рдЖрд░реЗрдЦ рдЬрд┐рд╕рдореЗрдВ рдкрд┐рдХреНрд╕реЗрд▓ рдорд╛рди рдХреЛ рдЖрдзрд╛рд░ рдлрд╝реЙрдиреНрдЯ рдЖрдХрд╛рд░ рд╕реЗ рднрд╛рдЧ рджреЗрдиреЗ рдкрд░ em рдорд╛рди рдмрд░рд╛рдмрд░ рджрд┐рдЦрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ
em рдорд╛рди рдкрд┐рдХреНрд╕реЗрд▓ рдорд╛рди рдХреЛ рдкрд┐рдХреНрд╕реЗрд▓ рдореЗрдВ рдЖрдзрд╛рд░ рдлрд╝реЙрдиреНрдЯ рдЖрдХрд╛рд░ рд╕реЗ рднрд╛рдЧ рджреЗрдиреЗ рдкрд░ рдорд┐рд▓рддрд╛ рд╣реИред

рд╣рд▓ рдХрд┐рдпрд╛ рд╣реБрдЖ рдЙрджрд╛рд╣рд░рдг

рдорд╛рди рд▓реАрдЬрд┐рдП рдЖрдк 24px рдХреЛ 16px рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рде рдмрджрд▓рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдлрд╝реЙрд░реНрдореВрд▓рд╛ рд▓рдЧрд╛рдПрдБ: $$24 \div 16 = 1.5\,\text{em}$$ рдпрд╛рдиреА 24px рдХрд╛ рд╣реЗрдбрд┐рдВрдЧ 1.5em рдмрди рдЬрд╛рддрд╛ рд╣реИред

16 рдкрд┐рдХреНрд╕реЗрд▓ рдЖрдзрд╛рд░ рдХреЗ рд╕рд╛рде 24 рдкрд┐рдХреНрд╕реЗрд▓ рдХреЛ 1.5 em рдореЗрдВ рдмрджрд▓рдиреЗ рдХрд╛ рдЙрджрд╛рд╣рд░рдг
рдЙрджрд╛рд╣рд░рдг: 16px рдЖрдзрд╛рд░ рдХреЗ рд╕рд╛рде 24px рдмрд░рд╛рдмрд░ 1.5em рд╣реЛрддрд╛ рд╣реИред

рдЕрдХреНрд╕рд░ рдкреВрдЫреЗ рдЬрд╛рдиреЗ рд╡рд╛рд▓реЗ рд╕рд╡рд╛рд▓

рдореБрдЭреЗ рдХреМрди-рд╕рд╛ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП? рдЙрд╕ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдкреИрд░реЗрдВрдЯ рдХрд╛ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реЗрдВред рд░реВрдЯ-рд╕реНрддрд░ рдХреЗ рдХрдиреНрд╡рд░реНрдЬрд╝рди рдХреЗ рд▓рд┐рдП рдЖрдорддреМрд░ рдкрд░ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ 16px рд╣реА рд╕рд╣реА рд░рд╣рддрд╛ рд╣реИред

em рдФрд░ rem рдореЗрдВ рдХреНрдпрд╛ рдлрд╝рд░реНрдХ рд╣реИ? em рдкреИрд░реЗрдВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддрд╛ рд╣реИ, рдЬрдмрдХрд┐ rem рд╣рдореЗрд╢рд╛ рд░реВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддрд╛ рд╣реИред

px рдХреЗ рдмрдЬрд╛рдп em рдХреНрдпреЛрдВ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реЗрдВ? em рдпреВрдЬрд╝рд░ рдХреА рдлрд╝реЙрдиреНрдЯ рд╕реЗрдЯрд┐рдВрдЧреНрд╕ рдХреЗ рд╕рд╛рде рд╕реНрдХреЗрд▓ рд╣реЛрддрд╛ рд╣реИ, рдЬрд┐рд╕рд╕реЗ рд╕реБрд▓рднрддрд╛ (accessibility) рдФрд░ рд░рд┐рд╕реНрдкреЙрдиреНрд╕рд┐рд╡ рдбрд┐рдЬрд╝рд╛рдЗрди рдмреЗрд╣рддрд░ рдмрдирддреЗ рд╣реИрдВред

рдЕрдВрддрд┐рдо рдЕрдкрдбреЗрдЯ: