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

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

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

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

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

рдмрджрд▓реА рд╣реБрдИ рд╡реИрд▓реНрдпреВ
16
рдирддреАрдЬрд╛
рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ 16 px

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

EM рдФрд░ PX рджреЛ рдЖрдо рдпреВрдирд┐рдЯ рд╣реИрдВ рдЬрд┐рдирдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ CSS рдореЗрдВ рдЯреЗрдХреНрд╕реНрдЯ рдХрд╛ рд╕рд╛рдЗрдЬрд╝, рд╕реНрдкреЗрд╕рд┐рдВрдЧ рдФрд░ рд▓реЗрдЖрдЙрдЯ рддрдп рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣реЛрддрд╛ рд╣реИред рдкрд┐рдХреНрд╕реЗрд▓ (PX) рдПрдХ рдПрдмреНрд╕реЛрд▓реНрдпреВрдЯ рдпреВрдирд┐рдЯ рд╣реИ, рдЬрдмрдХрд┐ EM рдЕрдкрдиреЗ рдкреИрд░реЗрдВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ (рд░рд┐рд▓реЗрдЯрд┐рд╡) рд╣реЛрддреА рд╣реИред рдпрд╣ рдХрдиреНрд╡рд░реНрдЯрд░ рдЗрди рджреЛрдиреЛрдВ рдХреЗ рдмреАрдЪ рд╡реИрд▓реНрдпреВ рдмрджрд▓ рджреЗрддрд╛ рд╣реИ, рддрд╛рдХрд┐ рд░рд┐рд╕реНрдкреЙрдиреНрд╕рд┐рд╡ рд╡реЗрдмрд╕рд╛рдЗрдЯ рдмрдирд╛рддреЗ рд╕рдордп рдЖрдк рдлрд╝рд┐рдХреНрд╕реНрдб рдФрд░ рд╕реНрдХреЗрд▓реЗрдмрд▓ рдорд╛рдк рдХреЗ рдмреАрдЪ рдЖрд╕рд╛рдиреА рд╕реЗ рдЖрдЧреЗ-рдкреАрдЫреЗ рдЬрд╛ рд╕рдХреЗрдВред

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

рд╕рдмрд╕реЗ рдкрд╣рд▓реЗ рдХрдиреНрд╡рд░реНрдЬрд╝рди рдХреА рджрд┐рд╢рд╛ рдЪреБрдиреЗрдВ тАФ EM рд╕реЗ PX рдпрд╛ PX рд╕реЗ EM тАФ рдлрд┐рд░ рдЕрдкрдиреА рд╡реИрд▓реНрдпреВ рдФрд░ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдкрд┐рдХреНрд╕реЗрд▓ рдореЗрдВ рдбрд╛рд▓реЗрдВред рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ 16px рд╣реЛрддрд╛ рд╣реИ, рдЬреЛ рдЖрдкрдХреЗ рд▓рд┐рдП рдкрд╣рд▓реЗ рд╕реЗ рднрд░рд╛ рд╣реБрдЖ рд╣реИред рдХреИрд▓рдХреБрд▓реЗрдЯ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░реЗрдВ рдФрд░ рдмрджрд▓рд╛ рд╣реБрдЖ рдирддреАрдЬрд╛ рддреБрд░рдВрдд рджреЗрдЦреЗрдВред

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

рдпрд╣ рдХрдиреНрд╡рд░реНрдЬрд╝рди рдПрдХ рд╕реАрдзрд╛ рдЕрдиреБрдкрд╛рддрд┐рдХ рд░рд┐рд╢реНрддрд╛ рд╣реИред EM рдХреЛ PX рдореЗрдВ рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдЧреБрдгрд╛ рдХрд░реЗрдВ:

$$\text{px} = \text{em} \times \text{base}$$

рдЙрд▓реНрдЯреА рджрд┐рд╢рд╛ рдореЗрдВ рдЬрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рднрд╛рдЧ рджреЗрдВ:

$$\text{em} = \dfrac{\text{px}}{\text{base}}$$

рдпрд╣рд╛рдБ base рд╡рд╣реА рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ (рдкрд┐рдХреНрд╕реЗрд▓ рдореЗрдВ) рд╣реИ рдЬрд┐рд╕рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ EM рд╡реИрд▓реНрдпреВ рддрдп рд╣реЛрддреА рд╣реИред

рдЖрд░реЗрдЦ рдЬрд┐рд╕рдореЗрдВ em рдХреЛ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рд╕реЗ рдЧреБрдгрд╛ рдХрд░рдиреЗ рдкрд░ рдкрд┐рдХреНрд╕реЗрд▓ рдорд┐рд▓рддреЗ рд╣реИрдВ, рд╕рд╛рде рдореЗрдВ рд╡рд╛рдкрд╕реА рдХрд╛ рддреАрд░
EM рдХреЛ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рд╕реЗ рдЧреБрдгрд╛ рдХрд░рдХреЗ PX рдореЗрдВ рдмрджрд▓рд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ PX рдХреЛ рднрд╛рдЧ рджреЗрдХрд░ рд╡рд╛рдкрд╕ EM рдореЗрдВред

рдЙрджрд╛рд╣рд░рдг рдХреЗ рд╕рд╛рде рд╕рдордЭреЗрдВ

рдорд╛рди рд▓реАрдЬрд┐рдП рдЖрдк 1.5em рдХреЛ 16px рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рде рдмрджрд▓рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред px = em ├Ч base рдХреЗ рд╣рд┐рд╕рд╛рдм рд╕реЗ:

$$1.5 \times 16 = 24\ \text{px}$$

рдЗрд╕реА рддрд░рд╣ рдЙрд▓реНрдЯрд╛ рдХрд░реЗрдВ рддреЛ \(24\ \text{px} \div 16 = 1.5\ \text{em}\)ред рдЕрдЧрд░ рдЖрдкрдХрд╛ рдмреЗрд╕ 20px рд╣реЛрддрд╛, рддреЛ 1.5em рдмрд░рд╛рдмрд░ 30px рд╣реЛрддрд╛ред

16 рдкрд┐рдХреНрд╕реЗрд▓ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рдХреЗ рд╕рд╛рде рд╕реНрдХреЗрд▓ рд╣реЛрддреЗ рджреЛ рдЯреЗрдХреНрд╕реНрдЯ рдЖрдХрд╛рд░реЛрдВ рдХреА рддреБрд▓рдирд╛
16px рдмреЗрд╕ рдХреЗ рд╕рд╛рде, 1.5em рдмрд░рд╛рдмрд░ рд╣реИ 24px тАФ рд╕рд╛рдкреЗрдХреНрд╖ рдЖрдХрд╛рд░ рдмреЗрд╕ рдХреЗ рд╕рд╛рде рд╕реНрдХреЗрд▓ рд╣реЛрддрд╛ рд╣реИред

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

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

рдХреНрдпрд╛ EM рдФрд░ REM рдПрдХ рд╣реА рдЪреАрдЬрд╝ рд╣реИрдВ? рдирд╣реАрдВред REM рд╣рдореЗрд╢рд╛ рд░реВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддреА рд╣реИ, рдЬрдмрдХрд┐ EM рд╕рдмрд╕реЗ рдирдЬрд╝рджреАрдХреА рдкреИрд░реЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддреА рд╣реИред REM рдХрдиреНрд╡рд░реНрдЬрд╝рди рдХреЗ рд▓рд┐рдП рдЕрдкрдиреЗ рд░реВрдЯ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЛ рдмреЗрд╕ рдХреЗ рд░реВрдк рдореЗрдВ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реЗрдВред

EM рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдЖрдЦрд╝рд┐рд░ рдХрд░реЗрдВ рд╣реА рдХреНрдпреЛрдВ? EM рдпреВрдирд┐рдЯ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рде рд╕реНрдХреЗрд▓ рд╣реЛрддреА рд╣реИрдВ, рдЬрд┐рд╕рд╕реЗ рдЬрдм рдпреВрдЬрд╝рд░ рдЕрдкрдирд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЯреЗрдХреНрд╕реНрдЯ рд╕рд╛рдЗрдЬрд╝ рдмрджрд▓рддреЗ рд╣реИрдВ, рддрдм рдбрд┐рдЬрд╝рд╛рдЗрди рдЬрд╝реНрдпрд╛рджрд╛ рдПрдХреНрд╕реЗрд╕рд┐рдмрд▓ рдФрд░ рд░рд┐рд╕реНрдкреЙрдиреНрд╕рд┐рд╡ рдмрдирд╛ рд░рд╣рддрд╛ рд╣реИред

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