em вместо px в font-size

[virus-07]

Здравствуйте. Не получается у меня найти толкового объяснения сего действа. Использовал задание в px, частенько встречал в em задание.

Объясните пож-та, в чем соль сего действа? Это задание относительно какого параметра? Текущего?

Edited May 15, 2011 by virus-07

[Serlutin]

em - это задание размера относительно родительского элемента.

<div style="font-size: 14px"><span style="font-size: 2em">текст</span></div>

В этом примере размер спан будет 14px*2, то есть 28px. Если нигде до этого размер шрифта не указан, то берётся системный, по умолчанию это 16px.

[buddah]

ну например если font-size=10px, то 1em=10px.

em относится к каждому элементу отдельно.

Например h1=24px, 1em=24px

h2=20px, 1em=20px

Если при таких параметрах задать h1,h2{margin-top:1em;} то h1 сдвинется на 24 пикселя, а h2 соответственно на 20. Как-то так.

[virus-07]

Большое спасибо, неспящие в Сиэттле =)

А как осуществляется в таких условиях верстка из PSD, пресловутый пиксель-хантинг?

[Serlutin]

А как осуществляется в таких условиях верстка из PSD, пресловутый пиксель-хантинг?

В настройка PS задаёшь отображать размер в px. Потом задаёшь какой-нибудь размер в body, например 10px. И от него уже пляшем. Тогда например 11px будет 1.1em. Также есть вариант body {font-size: 62.5%}. То есть это берётся значение по умолчанию в браузер, обычно 16px и превращается в 10px. Потом опять пляшем с em. Дело в том, что раньше не все браузеры (не будем показывать пальцем на IE) поддерживали масштабирование шрифтов, размер которых задан в px. Тут вообще довольно интересная история. По стандартам браузеры должны были масштабировать относительные размеры, такие как %, em, а абсолютные, такие как pt, не масштабировать. px являются относительной системой счисления, так как зависит от dpi, но разработчики IE посчитали её абсолютной и не стали делать масштабирование. Сейчас же все основные браузеры поддерживают любое масштабирование текста, поэтому использовать сейчас em не обязательно. Однако, если задать размер в em, то можно (а нужно ли) написать скрипт, который будет увеличивать размер в body, за счёт чего остальной текст тоже будет увеличиваться. Что-то по типу такого.

Edited May 15, 2011 by Serlutin

[virus-07]

А как осуществляется в таких условиях верстка из PSD, пресловутый пиксель-хантинг?

В настройка PS задаёшь отображать размер в px. Потом задаёшь какой-нибудь размер в body, например 10px. И от него уже пляшем. Тогда например 11px будет 1.1em. Также есть вариант body {font-size: 62.5%}. То есть это берётся значение по умолчанию в браузер, обычно 16px и превращается в 10px. Потом опять пляшем с em. Дело в том, что раньше не все браузеры (не будем показывать пальцем на IE) поддерживали масштабирование шрифтов, размер которых задан в px. Тут вообще довольно интересная история. По стандартам браузеры должны были масштабировать относительные размеры, такие как %, em, а абсолютные, такие как pt, не масштабировать. px являются относительной системой счисления, так как зависит от dpi, но разработчики IE посчитали её абсолютной и не стали делать масштабирование. Сейчас же все основные браузеры поддерживают любое масштабирование текста, поэтому использовать сейчас em не обязательно. Однако, если задать размер в em, то можно (а нужно ли) написать скрипт, который будет увеличивать размер в body, за счёт чего остальной текст тоже будет увеличиваться. Что-то по типу такого.

Большое спасибо, за разъяснения. Понимал, что это относительно чего-то, но так и не понимал чего. А наткнулся на хабре на опрос — решил заполнить пробел.

Доброй ночи всем, ещё раз спасибо )

[workerbeeviii]

1. Вот я прочитал на сайте, что за 100% берется размер шрифта родительского элемента. 100% = 1em ? Т. е. % и em идентичные единицы измерения или не так?

2. Что подразумевается под масштабированием шрифта? Ctrl +? Т. е. изменение масштаба страницы?

[Gaspode]

1. Вот я прочитал на сайте, что за 100% берется размер шрифта родительского элемента. 100% = 1em ? Т. е. % и em идентичные единицы измерения или не так?

В емах можно указывать не только размер шрифта, а вообще любые размеры. Как пример:

font-size: 10px;
width: 100em; /*1000px*/

[SelenIT]

1) "Идейно" да (применительно к шрифтам), на практике бывают различия при масштабировании (особенно в старых браузерах).

2) Подразумевается масштабирование страницы при включенной галке "Zoom text only" (в меню "View — Zoom") в FF либо "View — Text size" в IE. Для полностраничного зума все единицы равнозначны.

[workerbeeviii]

Спасибо за ответы. Теперь понятно стало.

[dostel1]

А есть практика в создании отдельных блоков через em где это нужно будет ,а не всего макета?

[Justnewone]

Самая обыкновенная практика. Не понимаю, в чем заковыку предполагаете.

[dostel1]

сломается верстка при масштабировании??

[Justnewone]

если делать все правильно - не сломается. Будет просто рост в ширину и в высоту. Где почитать подробнее не знаю.

[dostel1]

а если ограничить блок mаx-width подойдет,чтобы прекратить увеличение ?

Edited December 15, 2011 by dostel1

[Justnewone]

Подойдет.

С умом надо подходить, чтобы текст нормально компоновался. Можно даже и в прибитом лейауте делать ем блоки, главное - с умом. Задачи бывают очень разные.

Но скажу кое-что, целесообразность такого способа сейчас очень мала, учитывая что 90% пользователей не знаю что такое масштаб и еще 90% из нех масштабируют целиком, а не только текст.

[dostel1]

пасиб)буду разбиратся!ох и геморный этот em