Jump to content
  • 0

em vs px


SuperJerk
 Share

Question

Всех приветствую.

Сабж, собсно такой: имеет ли смысл на сегодняшний день, задавать размер шрифта в em? Все более-менее современные и не очень браузеры нормально зумят шрифт, который задан в px ( да и зумить страницу гораздо проще, чем лезть в настройки и менять размер шрифта ). Ну а для резины проценты, имхо, гораздо удобней.

В em меня не устраивает то, что некоторые элементы при увлечении шрифта, ломаются. Например, горизонтальная менюшка: на всю ширину, текст в em. В итоге меню лезет на новую строку... nowrap не катит.

Как исправлять подобные вещи? Использовать в таких местах px?

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Спасибо, но эту статью уже читал :) Там проценты победили в случае резиновых макетов и я с этим полностью согласен (а я имею ввиду фикс. ширину).

При смене параметров клиента, текст в "%" изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.

Только этой статье уже 5 лет и в то время браузеры не очень хорошо умели работать с пикселями. Сейчас же можно нажать хоткей и увеличить страницу, при этом с пикселями будет всё ок.

Link to comment
Share on other sites

  • 0

Em удобны в первую очередь для размеров, рассчитанных на увеличение размеров шрифта и т.п.. Как раз таки масштабирование путём увеличения размеров шрифта при соответствующей вёрстке выглядит лучше — элементы увеличиваются, а изображение не замыливается, но это мало для какого дизайна подходит. Да и много мороки с каскадностью, если задавать размеры шрифта в em (хотя есть ещё rem, но это пока не кроссбраузерно), так что пиксели побеждают.

Link to comment
Share on other sites

  • 0

rem решает с поддержкой уже все в порядке.

[r]em позволяет делать верстку более гибкой чем с применением px, и дело не в том, что можно указать в настройках браузера другой размер шрифта по-умолчанию и страница подстроится. Это только самый поверхностный вариант использования. Все гораааздо интересней. Масштабирование через CTRL + (+|-) это вообще не из этой песочницы.

Так, что если верстка обеспечивает адаптивность в любых проявлениях, px делать там нечего rem решает, в крайнем случае em. Но с em нужно быть немного внимательней чем с rem из-за каскадирования. Если же это просто статичная, по своему поведению, страница то можно и px использовать. Но если заложить избыточность и применить [r]em даже в простой верстке, это будет играть только на руку при поддержке проекта.

Так, что rem побеждает :P;)

Link to comment
Share on other sites

  • 0

Для line-height или отступа текста, понятно, что можно и нужно использовать em. А вот для размера текста это не очень удобно. Rem могли бы быть решением, но

http://caniuse.com/#search=rem

IE9+, Opera mini не поддерживает.

Link to comment
Share on other sites

  • 0

Не знаю насколько это правда, но уже много лет назад когда я начинал, один человек на похожий вопрос сказал : "как привыкнешь в итоге так и будешь далее вставлять единицы величины, +em вроде как больше для типографии подходит, нежели для веба".

В итоге всю жизнь размечаю все в px и как-то проблем не испытываю)).

Link to comment
Share on other sites

  • 0

em нормально подходит для указания размеров шрифта. Я согласен, что em имеет свои ограничения, но тем не менее.

А то что rem не поддерживается в IE8- и Opera mini. Так это не делает ограничений в его использовании. В скопе с отсутствием поддержки rem там еще много чего не поддерживается. И без того остального rem просто не имеет особого смысла.

Не знаю насколько это правда, но уже много лет назад когда я начинал, один человек на похожий вопрос сказал : "как привыкнешь в итоге так и будешь далее вставлять единицы величины, +em вроде как больше для типографии подходит, нежели для веба".

В итоге всю жизнь размечаю все в px и как-то проблем не испытываю)).

я раньше тоже только px использовал, долгое время, а потом перешел на em, сейчас на rem

  • Like 1
Link to comment
Share on other sites

  • 0

em нормально подходит для указания размеров шрифта. Я согласен, что em имеет свои ограничения, но тем не менее.

А то что rem не поддерживается в IE8- и Opera mini. Так это не делает ограничений в его использовании. В скопе с отсутствием поддержки rem там еще много чего не поддерживается. И без того остального rem просто не имеет особого смысла.

Не знаю насколько это правда, но уже много лет назад когда я начинал, один человек на похожий вопрос сказал : "как привыкнешь в итоге так и будешь далее вставлять единицы величины, +em вроде как больше для типографии подходит, нежели для веба".

В итоге всю жизнь размечаю все в px и как-то проблем не испытываю)).

я раньше тоже только px использовал, долгое время, а потом перешел на em, сейчас на rem

А если стоит везде rem, и браузер его не понимает, то он какие размеры выставляет?

Link to comment
Share on other sites

  • 0

А если стоит везде 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

  • Similar Content

    • By Tascan
      Всем привет.
      Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem.
      И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px.
      Но стоило изменить единицы измерения в высоте:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px.
      Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit?
      И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
×
×
  • 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