Jump to content
  • 0

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


virus-07
 Share

Question

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

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

Edited by virus-07
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

h2=20px, 1em=20px

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

Link to comment
Share on other sites

  • 0
А как осуществляется в таких условиях верстка из 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 by Serlutin
Link to comment
Share on other sites

  • 0
А как осуществляется в таких условиях верстка из 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, за счёт чего остальной текст тоже будет увеличиваться. Что-то по типу такого.

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

Подойдет.

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

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

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy