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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

Я вижу 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

Ответ 6

Я попытался сделать то же самое, но столкнулся с проблемой использования rems для полей и paddings. Установка 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;
}

Ответ 7

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

Ответ 8

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