Використання відносних одиниць, таких як em, є відмінним способом для підтримки вертикального розміру веб-сторінки, коли користувач змінює розмір тексту в браузері.
Скажімо, у вас є HTML заголовок H3 розміром 24 пікселя. Не має значення, як встановлено розмір шрифту font-size (пікселі, EM, відсотки, і т.д.). Використовуючи Firebug, ви можете дізнатися фактичний розмір шрифту в пікселях, перевірте опцію «Show Computed Style»у правому верхньому кутку панелі CSS / Style при перегляді в режимі HTML.
Ви виміряли дизайн, і переконалися, що нижній відступ від заголовка H3 до наступного елемента дорівнює 9 пікселям. Звичайно, ви можете встановити відступ для елемента H3 у вигляді margin-bottom: 9px, і рухатися далі. Але це не дозволить масштабувати елемент. Коли користувач збільшить розмір шрифту в браузері, вертикальний розмір веб-сторінки буде зіпсований, оскільки H3 збільшиться в розмірах, але збереже всі ті ж самі 9 пікселів нижнього відступу.
Формула для обчислення множника em:
необхідний розмір в пікселях / поточний розмір в пікселях = множник
Значить, для нашого H3 прикладу: 9/24 = .375
Рекомендуємо використовувати EmChart весь час для перетворення дизайну в X HTML / CSS шаблони. Ця таблиця дуже корисна для розрахунку висоти нижніх полів margin-bottom, висоти лінії line-height (які безрозмірні, але формула, як і раніше застосовується), верхніх полів margin-top, і серед іншого, верхніх / нижніх padding відступів. Також дуже зручно для збереження переносимості розміру шрифту font-size.
Корисні статті та замітки по темі: