Jump to content
  • 0

работа с em


ksn
 Share

Question

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

 

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

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

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

h2 { font-size: 1.5em;} /21px/14px
Link to comment
Share on other sites

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

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

 

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

Link to comment
Share on other sites

  • 0

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

Остроумно.
 

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. Или не согласны))))

Link to comment
Share on other sites

  • 0

Где в моем контексте вообще есть намек на то, что элемент 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.

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

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

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

Не будет.
Link to comment
Share on other sites

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

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

Edited by IIIIIIIIII
Link to comment
Share on other sites

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

 

 

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

 

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

 

 

 

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

 

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

Link to comment
Share on other sites

  • 0

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

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

e.pngi.gif

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

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

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