CSS Как правильно использовать ems вместо пикселей?

Question

Я хотел бы попытаться преобразовать мои дизайны из пикселей в ems. Я прочитал так много учебников, что ... и я оставлю это прямо там.

Начиная с этой базы:

body {
    font-size: 62.5%;
    line-height: 1.4;
}

... теперь я заблудился ...

Должен ли я определить свой font-size так:

div#wrapper { font-size: 1.5em; }

... или как это:

blockquote, li, p, dt, dd, etc { font-size: 1.5em }

И затем следующее, что я на самом деле не понимаю, это то, где ELSE я должен использовать ems в дополнение к font-size и line-height? Я буду использовать макет фиксированной ширины, используя 960.gs .

Answer 1

line-height: 1.4em;

Вероятно, не то, что вы хотите. Высота строки будет оставаться на той же вычисленной высоте для размера «em» в этом элементе, даже если вы измените размер шрифта для элемента-потомка.

line-height имеет особый случай, когда он допускает число без единицы:

line-height: 1.4;

Что делает высоту строки каждого потомка зависит от его собственного размера шрифта, а не от предка.

Должен ли я определять размер шрифта [для оболочки или для многих типов элементов]?

Ну, это скорее зависит от того, что вы пытаетесь сделать. С относительными размерами шрифта, как правило, лучше сохранять количество объявлений минимальным, потому что они вложены: то есть, с вашим blockquote { font-size: 1.5em; }, если вы поместите цитату внутри блочной цитаты, вы получите размер шрифта: 1,5 * 1,5 = 2,25em по сравнению с размером основного шрифта. Это то, что вы хотите? Может быть, а может и нет.

где иначе я должен использовать ems

Везде, где вы хотите, чтобы размер элемента отвечал предпочтительному для пользователя размеру шрифта. Одним из распространенных примеров будет что-то вроде:

#maintext {
    width: 60%;
    min-width: 8em;
    max-width: 40em;
}

, чтобы попытаться ограничить текстовые строки разумной шириной столбца при выполнении разметки.

Но если вы ограничиваете себя макетом с фиксированной шириной, возможно, не имеет смысла устанавливать ширину элемента в font-size-size.

Answer 2

Вы можете найти Как изменить размер текста с помощью ems интересное и полезное чтение. То, что я пытаюсь запомнить, - это мое преобразование из ems в пиксели.

В вашем примере:

body {
  font-size: 62.5%;
  line-height: 1.4em;
}

1 em равно 10 пикселям, если размер текста по умолчанию в браузере равен 16px. Высота линии тогда будет равна 14 пикселям. Как и бобинцев из , я бы использовал значение line-height без единиц измерения.

Чтобы помочь вам с расчетами, вы можете использовать Em Calculator . Это позволяет легко конвертировать между ems и пикселями.

Answer 3

Если вы хотите настроить ширину страницы с помощью em, следуйте этому шаблону, предоставленному командой разработчиков YUI

Разделите желаемую ширину пикселя на 13; результат - ваша ширина в ems для всех браузеров, отличных от IE. Для IE, разделите желаемый пиксель на 13,3333, чтобы найти ширину в ems для IE.

Вот пример пользовательской ширины страницы в 600 пикселей и вот как выглядит CSS:

600 пикселей / 13 = 46,15 (браузеры без IE)

600 пикселей / 13,33 = 45,00 (браузеры IE)

#custom-doc { 
    margin:auto;text-align:left; /* leave unchanged */ 
    width:46.15em;/* non-IE */ 
    *width:45.00em;/* IE */ 
    min-width:600px;/* optional but recommended */ 
}   

С уважением,

Answer 4

ems относительны, поэтому, если вы установите:

body {
    font-size: .6em;
}

Все будет относительно этого.

Это означает (и здесь моя голова тоже начинает болеть), что если у h1 размер шрифта по умолчанию на 250% больше, чем у большинства других текстов (p, li), заголовок теперь будет 60 % от этого размера по умолчанию. Так что он все равно будет в 2,5 раза больше, чем другие, но будет на 60% меньше, чем если бы вы вообще не устанавливали правило.

Теперь, если вы скажете, что:

h1 {
    font-size: 1.2em;
}

Теперь h1 будет на 20% больше, чем было бы, если бы вы не установили правило, поэтому оно на 20% больше, чем уже уменьшенное на 60% меньше, чем в первом правиле. Это означает, что он больше не будет прямо пропорционален настройкам браузера по умолчанию для h1 и других элементов.

Так что, в основном, вы должны установить размер шрифта заранее для всего документа (как в первом правиле, которое я показал), и это ваша базовая линия. После этого вы устанавливаете, каким образом вы хотите, чтобы размер отдельных элементов определялся по отношению друг к другу (в основном по отношению к тому, что они уже есть) ...

Так что, если вы знаете, что хотите, чтобы все шрифты в div #wrapper были равны 1,5em по умолчанию, установка их там будет идеальной. Но если вы хотите изменить размер цитаты, чтобы она была чуть меньше, вы все равно установите правило для #wrapper, но затем создадите второе правило для цитаты.

Answer 5

Проблема с em в том, что это относительная единица. Наследование и относительность плохо сочетаются в документах HTML. Я использую px для размера шрифта и размеров / расположения блоков, но попробуйте использовать em для высоты строки, поля / отступов и т. Д. *

Я уверен, что это не «правильный» способ сделать это, но система была довольно плохо спроектирована с самого начала, если вы спросите меня.