работа с em

[ksn]

Ребята, подскажите пожайлуйста, как рабоать с измерением  "em", в игнтеренете читал много чего, но толком ни чего не написано.

 

Если не сложно обясните принципи работы этого добра и если не сложно дайте сылки на полезные ресурсы.

[Aleksandr.L]

Ну 1em — это текущий размер шрифта. В большинстве браузеров шрифт по умолчанию имеет размер 16px. Тогда 2em будет 32px и т.д. 0.5em — 8px.

[IIIIIIIIII]

1em равен размеру основного шрифта. Например, если по умолчанию для всей страницы задан размер 14px, то 1em = 14px. И изменяя базовый параметр, измениться пропорционально размер всех элементов на странице автоматически. Т.е
 

h2 { font-size: 1.5em;} /21px/14px

[klierik]

  On 10/7/2014 at 12:22 PM, ksn said:

Ребята, подскажите пожайлуйста, как рабоать с измерением  "em", в игнтеренете читал много чего, но толком ни чего не написано.

 

так а что ты читал в таком случае?

 

как варинат есть старая хорошая статья: http://habrahabr.ru/post/21209/

[sigma77]

  On 10/7/2014 at 12:38 PM, IIIIIIIIII said:

1em равен размеру основного шрифта. Например, если по умолчанию для всей страницы задан размер 14px, то 1em = 14px. И изменяя базовый параметр, измениться пропорционально размер всех элементов на странице автоматически. Т.е

Не совсем верно.Не путай с rem.

Em же считается от заданного шрифта родительского элемента.

http://jsfiddle.net/t5vfs82v/1/

[IIIIIIIIII]

  On 10/7/2014 at 1:16 PM, sigma77 said:

Не совсем верно.Не путай с rem. Em же считается от заданного шрифта родительского элемента.

Я ничего не путаю. При тщательно продуманном штмл-коде это проблема решается с помощью селектора потомков. 

[sigma77]

  On 10/7/2014 at 4:29 PM, IIIIIIIIII said:

Я ничего не путаю.

Значит ошибается спека. Интересно, w3c знают об этом ))

[IIIIIIIIII]

  On 10/7/2014 at 4:43 PM, sigma77 said:

Значит ошибается спека. Интересно, w3c знают об этом ))

Остроумно.
 

  On 10/7/2014 at 1:16 PM, sigma77 said:

Em же считается от заданного шрифта родительского элемента.

Это просто главное отличие от rem. Где в моем контексте вообще есть намек на то, что элемент c em не наследует у родителя размер.

16px<div>    32px    <p>        32px        <span>16px</span>    </p></div>

Что это за код вообще, кто так верстает?))))) Зачем задавать диву размер, а потом параграфу?)) Параграф будет отталкиваться от body, если у родителей не задан размер выше. И чаще всего так и бывает. Если отдельно указывается размер, то так

.content p {font-size: 1.5em}  .content li {font-size: 0.8}

Rem просто более удобен , тут не поспоришь. Но умеючи можно также сверстать и на em. 
 

.body {font-size: 14px};.sigma {font-size: 1em};<div><div><div><div><span class="sigma">sigma</div</div></div></div></div>

Спан классом sigma будет 14px. Или не согласны))))

[sigma77]

  On 10/7/2014 at 5:02 PM, IIIIIIIIII said:

Где в моем контексте вообще есть намек на то, что элемент c em не наследует у родителя размер.

Это ключевой и очень важный момент. О нем нельзя не упомянуть в контексте с em.

h1 { font-size: 1.2em }

means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.

  On 10/7/2014 at 5:02 PM, IIIIIIIIII said:

Что это за код вообще, кто так верстает?)))))

Учебный пример от реальной верстки отличать умеем? Этот пример реально показывает, что может произойти, если забыть о наследовании.

  On 10/7/2014 at 5:02 PM, IIIIIIIIII said:

Спан классом sigma будет 14px. Или не согласны))))

Не будет.

[IIIIIIIIII]

  On 10/7/2014 at 5:37 PM, sigma77 said:

Не будет.

Можете так и думать. Я доказывать не буду. Все придет с опытом.))))

[Vessel]

Мне кажется, что если ограничиться px и % , то это придаст работе универсальности.

[sigma77]

  On 10/7/2014 at 5:45 PM, IIIIIIIIII said:

Можете так и думать. Я доказывать не буду. Все придет с опытом.))))

Куда уж нам )))

[IIIIIIIIII]

  On 10/7/2014 at 6:03 PM, Vessel said:

Мне кажется, что если ограничиться px и % , то это придаст работе универсальности.

Разницы между em и % нет. У em только неполадки с internet explorer. Rem придает работе универсальности т.к решает проблемы с каскадированием.

Edited October 7, 2014 by IIIIIIIIII

[Sergik+]

Вроде как мода на rem прошла уже ? Или я путаю чо

[SelenIT]

  On 10/7/2014 at 5:02 PM, IIIIIIIIII said:

<div><span class="sigma">sigma</div</div>

 

 

  On 10/7/2014 at 5:45 PM, IIIIIIIIII said:

Я доказывать не буду.

 

Доказывать-то не обязательно, но тег в примере желательно всё-таки закрыть правильно, даже несмотря на опыт

 

 

 

  On 10/7/2014 at 8:50 PM, Sergik+ said:

Вроде как мода на rem прошла уже ?

 

А она начиналась?

[IIIIIIIIII]

  On 10/7/2014 at 9:52 PM, 'SelenIT said:

оказывать-то не обязательно, но тег в примере желательно всё-таки закрыть правильно, даже несмотря на опыт

  Reveal hidden contents

Если вы уже ребром ставите вопрос. Что якобы мы... 

  On 10/7/2014 at 8:50 PM, Sergik+ said:

Вроде как мода на rem прошла уже ? Или я путаю чо

 

Путаете. Rem спасение в адаптивке.