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 рдкреИрд░реЗрдВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддрд╛ рд╣реИ, рдЬреЛ рд░реВрдЯ рд╕реЗ рдЕрд▓рдЧ рднреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИред
рд╣рд▓ рдХрд┐рдпрд╛ рд╣реБрдЖ рдЙрджрд╛рд╣рд░рдг
рдорд╛рди рд▓реАрдЬрд┐рдП рдЖрдк 24px рдХреЛ 16px рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рде рдмрджрд▓рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВред рдлрд╝реЙрд░реНрдореВрд▓рд╛ рд▓рдЧрд╛рдПрдБ: $$24 \div 16 = 1.5\,\text{em}$$ рдпрд╛рдиреА 24px рдХрд╛ рд╣реЗрдбрд┐рдВрдЧ 1.5em рдмрди рдЬрд╛рддрд╛ рд╣реИред
рдЕрдХреНрд╕рд░ рдкреВрдЫреЗ рдЬрд╛рдиреЗ рд╡рд╛рд▓реЗ рд╕рд╡рд╛рд▓
рдореБрдЭреЗ рдХреМрди-рд╕рд╛ рдмреЗрд╕ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП? рдЙрд╕ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдкреИрд░реЗрдВрдЯ рдХрд╛ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реЗрдВред рд░реВрдЯ-рд╕реНрддрд░ рдХреЗ рдХрдиреНрд╡рд░реНрдЬрд╝рди рдХреЗ рд▓рд┐рдП рдЖрдорддреМрд░ рдкрд░ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдХрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ 16px рд╣реА рд╕рд╣реА рд░рд╣рддрд╛ рд╣реИред
em рдФрд░ rem рдореЗрдВ рдХреНрдпрд╛ рдлрд╝рд░реНрдХ рд╣реИ? em рдкреИрд░реЗрдВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддрд╛ рд╣реИ, рдЬрдмрдХрд┐ rem рд╣рдореЗрд╢рд╛ рд░реВрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдлрд╝реЙрдиреНрдЯ рд╕рд╛рдЗрдЬрд╝ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣реЛрддрд╛ рд╣реИред
px рдХреЗ рдмрдЬрд╛рдп em рдХреНрдпреЛрдВ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реЗрдВ? em рдпреВрдЬрд╝рд░ рдХреА рдлрд╝реЙрдиреНрдЯ рд╕реЗрдЯрд┐рдВрдЧреНрд╕ рдХреЗ рд╕рд╛рде рд╕реНрдХреЗрд▓ рд╣реЛрддрд╛ рд╣реИ, рдЬрд┐рд╕рд╕реЗ рд╕реБрд▓рднрддрд╛ (accessibility) рдФрд░ рд░рд┐рд╕реНрдкреЙрдиреНрд╕рд┐рд╡ рдбрд┐рдЬрд╝рд╛рдЗрди рдмреЗрд╣рддрд░ рдмрдирддреЗ рд╣реИрдВред