Ems в Pixel Conversion - Почему 62,5%, а не 6,25%?

Question

Я знаю, что многие из нас знакомы с установкой размера шрифта для элемента body в нашем CSS на 62,5%. Это означает, что 1em будет равняться 10px и помогает поддерживать идеальный пиксель, но также позволяет масштабировать шрифты.

Так не значит ли это, что установка его на 6,25% будет равняться 1em = 1px? Похоже, что это даже более простое преобразование, чем необходимость возиться с десятичными числами ...

---

Спасибо, ребята! Я хорошо знаю их и их историю (степень дизайна), но я уверен, что другие могут найти это полезным:)

Что касается 1em = 1px, я не вижу, как это нежелательно. Они квадратные, независимо от ваших единиц измерения (будь то точки или пиксели), и никто не установит их тип в 1px (точно так же, как никто не установит печатный тип в 1pt). Более того, даже ваша статья признает, что в большинстве цифровых гарнитур заглавная буква «M» обычно меньше 1em, и что em является просто отражением размера точки (тип 48pt будет отображать квадрат 48pt на 48pt для em, 12pt тип даст 12x12 и т. д.)

Кроме того, причина, по которой люди будут делать это, будет заключаться в настройке размеров других элементов на странице, чтобы все хорошо масштабировалось, когда пользователь регулирует размер шрифта. Конечно, всегда найдутся те немногие, кто установит по умолчанию значение, отличное от 16px, но стоит того, чтобы заплатить за идеальную по пикселям компоновку, которая хорошо масштабируется.

Answer 1

Прежде всего, не думайте, что 1 em будет равен 10 пикселям. Емкость находится в прямой зависимости от используемой типографии. Если у кого-то размер шрифта 16 пикселей, тогда 62,5% - это действительно 10 пикселей (16 * 0,625 = 10), но это, очевидно, изменится, если кто-то изменил размер шрифта по умолчанию.

Во-вторых, это первый раз, когда я слышал об использовании 62,5% для базового тела font-size. Я всегда использую font-size 76%, основываясь на Sane CSS Typography от Оуэна Бриггса .

Наконец, чтобы ответить на ваш вопрос, да, вы можете использовать размер шрифта 6,25%, а затем, например, использовать 12em вместо 1.2em. Тем не менее, я бы очень не рекомендовал эту методологию. В мире типографий один em должен иметь значение ширины заглавной буквы 'M' . Этот метод полностью нарушает эту обычную практику и серьезно смущает любого, кто может поддерживать ваш CSS в будущем.

Answer 2

Возможно, но тогда вы теряете контроль над своей шкалой. Не забывайте, что заголовки обычно наследуют те же размеры пропорционально их рангу (то есть <h1> будет самым большим, <h2> немного меньшим). Если вы хотите уменьшить эти элементы, вам нужно будет использовать значения em с большим количеством десятичных заполнителей. Представь себе <h4> font-size: 0.005em.

Или, что еще хуже, если вы хотите, чтобы шрифты масштабировались больше, вы могли бы смотреть на font-size: 40em или что-то смешное.

Короче говоря, 1em = 10px гораздо более практично для масштабированных значений шрифтов. Хотя масштаб 1: 1 может иметь смысл на бумаге, он не очень хорошо подходит для разумного и удобного в использовании CSS.

Answer 3

Вся вещь "62,5% = 10 пикселей" в любом случае принципиально сломана - 62,5% может быть или не быть 10 пикселей в зависимости от браузера, настроек пользователя и, особенно, настройки минимального размера шрифта. Таким образом, вы не можете просто проектировать в пикселях, а затем «конвертировать» в ems, предполагая, что 62,5% = 10 пикселей, потому что ваш дизайн будет ломаться все время. Если вы хотите идеальный дизайн пикселей, вы должны использовать пиксели в качестве единицы. Если вам нужен гибкий дизайн, вам нужно подумать о соответствующих единицах измерения для различных элементов веб-сайта - например, для элементов, которые должны масштабироваться в соответствии с размером текста, в процентах для элементов, которые должны масштабироваться относительно размера окна, и в пикселях для элементов ( как изображения), которые не должны масштабироваться вообще.

Тот, кто включает размер шрифта: 62,5% в свой CSS, принципиально не понимает, как создавать веб-сайты.

Answer 4

Я пытался сделать то же самое, но столкнулся с проблемой использования rems для полей и отступов. Установка font-size на 62,5% позволяет избежать этих проблем.

Например, следующий CSS

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

отображается как:

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

Странно, правда? Я предполагаю, что это вызвано странным конфликтом с минимальным размером шрифта.

---

Теперь, если вы используете font-size: 62.5% с другой стороны, все будет выглядеть так, как ожидалось:

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

отображается как:

p {
  font-size: 1px;
  margin:    1px;
}

Answer 5

Преобразование может быть проще, но их не будет означать, что это должно означать.

1em предполагается равным ширине, если в данном шрифте прописная буква "M". Если ширина буквы M составляет 1 пиксель, ваш шрифт станет нечитаемым.

http://en.wikipedia.org/wiki/Em_(typography)

Answer 6

Отличный вопрос.

Я считаю 6,25% интересным предложением для адаптивного / адаптивного веб-дизайна и эластичного шаблонов .

В частности, определение размера шрифта с помощью rem позволяет использовать его в качестве аргумента для вашего аргумента ... соотношение 1: 1 просто проще .

rem : "root em" ... размер шрифта корневого элемента. http://www.w3.org/TR/css3-values/

См. rem пример из: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

А теперь с вашим предложением ...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */
body { font-size: 14px; font-size: 14rem; } /* =14px */
h1   { font-size: 24px; font-size: 24rem; } /* =24px */

... Поиграйте с моим примером JSBin: Тестирование CSS3 "rem" модулей для эластичного контента

Отношение 1: 1 em к px должно привести к меньшему количеству опечаток.

REM Примечания: При правильном сбросе CSS и body объявлении базы font-size в px и rem ваши стили изящно ухудшаются ... Если поддерживается rem, и объявляется после px, его значение применяется. В противном случае браузер возвращается к px.

Определение поддержки (особенно на мобильном телефоне) для rem. Пожалуйста, нажмите на эту страницу с любым / всеми браузерами / устройствами, которые вы можете ... http://ahedg.es/w/rem.html

Answer 7

Обновленная версия доступна на http://pixelconverter.kleptomac.com Это онлайн-конвертер для преобразования пикселей, точек, их, процентов. Это поддерживает преобразование из / в любой из этих единиц.

Answer 8

Вы также можете найти это полезным. http://pixel2em.kleptomac.com Это обеспечивает онлайн-конвертер пикселей в em, и вы также можете выполнить полное преобразование файла CSS.