Комментарии 82
Тоже об этом задумываюсь, никак руки не дойдут поменять. При наличии огромного количества мобильных устройств с самыми разными разрешениями и плотностью пикселей это весьма актуально
Кто-то еще не использует em?
Человек ниже бросил ссылку на пост, которому четыре года. Уже тогда всем рекомендовали переходить на em/проценты.
Сейчас есть такие вещи как fullhd и retina, html5 шагает по планете, а люди еще задают кегль в пикселях?
Сейчас есть такие вещи как fullhd и retina, html5 шагает по планете, а люди еще задают кегль в пикселях?
хабрахабр?
Забавно что сам сайт css-tricks.com сверстан с помощью px, хотя релиз последнего дизайна был в сентябре.
Есть ли хорошие примеры сайтов с более-менее сложным дизайном, где отступы и шрифты заданы в em? Было бы любопытно посмотреть.
Есть ли хорошие примеры сайтов с более-менее сложным дизайном, где отступы и шрифты заданы в em? Было бы любопытно посмотреть.
the-pastry-box-project.net (первое, что пришло в голову).
Вообще, мы используем отступы в em'ах, более того, размеры блоков, картинок и т.д. тоже в процентах/em'ах.
Вообще, мы используем отступы в em'ах, более того, размеры блоков, картинок и т.д. тоже в процентах/em'ах.
Я не зря указал «более-менее сложным дизайном»: когда это пара колонок текста «выражаться» в em-ах достаточно просто.
А когда дизайн, где мы не можем масштабировать графику? Или интерфейс? Может быть, проект уровня zvooq.ru?
Или хотя бы проект с кастомными контролами, нестандартными тенями / градиентами вот этим всем, без чего современный сайт уже не может существовать?
А когда дизайн, где мы не можем масштабировать графику? Или интерфейс? Может быть, проект уровня zvooq.ru?
Или хотя бы проект с кастомными контролами, нестандартными тенями / градиентами вот этим всем, без чего современный сайт уже не может существовать?
Сбегал на mediaqueri.es/popular/ за www.regent-college.edu/
Кстати, мне стало интересно, почему ничего сразу не пришло на ум. В большие проекты боятся внедрять необкатанные приемы? Хотя в то же время у меня уже давно сложилось представление об RWD как о стандарте де-факто в индустрии.
Кстати, мне стало интересно, почему ничего сразу не пришло на ум. В большие проекты боятся внедрять необкатанные приемы? Хотя в то же время у меня уже давно сложилось представление об RWD как о стандарте де-факто в индустрии.
Да, и mediaqueri.es — отличный шоукейс.
НЛО прилетело и опубликовало эту надпись здесь
Я!
Фейсбук например)
Давненько был интересный пост на эту тему: habrahabr.ru/post/42151/
Если технология что-то упрощает — она приживается быстро.
C em я такого не наблюдаю. Сколько про них не пишут.
C em я такого не наблюдаю. Сколько про них не пишут.
Меня зачастую останавливает от использования em проблематичность сброса font-size: 0; для родителя inline-block элементов.
Я знаю, что есть альтернативы, но как-то привык к такому шаблону.
Я знаю, что есть альтернативы, но как-то привык к такому шаблону.
em не может упростить верстку фиксированного PSD-макета. Но если макет изначально проектируется независимым от пикселей — необходимость использования пикселей исчезает.
Подход с фиксированным макетом пока еще не вымер и повсеместно применяется, отсюда и отсутствие популярности (востребованности) относительных величин при верстке.
Подход с фиксированным макетом пока еще не вымер и повсеместно применяется, отсюда и отсутствие популярности (востребованности) относительных величин при верстке.
Обращал внимание, что шаг, к примеру, 9px, 11px, 13px, 15px значительно лучше влияет на четкость (да и красивость) текста с Clear Type у некоторых шрифтов.
Непонятно, в чём проблема, изложенная в последнем абзаце. Почему не задать размер шрифта у
ul вместо li?ul в ul тоже вкладывается.
Но можно конечно изловчиться указывая прямого наследника ">" но это и для li сработает
Но можно конечно изловчиться указывая прямого наследника ">" но это и для li сработает
ul в ul, положим, не вкладывается, но я понимаю, что Вы имеете в виду. В любом случае, проблема в топике кажется либо раздутой, либо недоразъяснённой.
<ul>
<li>li_1</li>
<li>li_2
<ul>
<li>li_2_1</li>
<li>li_2_2</li>
</ul>
</li>
<li>li_3</li>
</ul>
<style>
ul { font-size:2em; }
</style>
В топике говорится про то, что li_2_1 и li_2_2 будут иметь font-size 4em.
Решается заданием font-size для родителя ul. А размер вложенных списков можно задавать через селектор ">". Так что да, это, конечно, это не проблема и не ложка дёгтя. Такое поведение свойственно не только em, а всем относительным размерам. И сложности может вызывать только у начинающих.
А как же макет, по которому размер шрифта «вот здесь» должен быть 12px?
> В этом случае, используя media queries для масштабирования, придется настраивать каждый из этих 50 font-size
Хорошо что уже давно есть LESS/SASS
Хорошо что уже давно есть LESS/SASS
На стороне клиента пересобирать css? Не совсем понял как это поможет.
Вы правы, не тот случай. Погорячился.
Зачем на стороне клиента? LESS существует и на бэкнде. Заводите переменную fontSize и все размеры указываете от него ( fontSize / 2 и т.д.)
Так тут весь смысл в том, что б при изменениях размера экрана (ресайзе) менять параметры в css. Зачем тут серверная сторона?
Так ведь и я говорю ) Прошу прощения за возможный неверный синтаксис.
Это LESS-файл ) Все те же плюшки, что и с em, но с пикселями )
@fontSize = 14;
body {
font-size: @fontSize; }
@media (max-width: 600px) {
body {
font-size: @fontSize / 2;
}
}
Это LESS-файл ) Все те же плюшки, что и с em, но с пикселями )
Вот из-за последней ложки дегктя, относительные единицы измерения очень трудно использовать на больших проектах и это перекрывает все их достоинства. Большим поклонником em-ов был Яндекс, но и они постепенно переходят на px, например, тут: habrahabr.ru/company/yandex/blog/149327/:
Относительные единицы измерения создают сильную связанность между блоками, а от сильной связанности, как известно, лучше избавляться.
Практически на всех наших сервисах сейчас используется указание размеров в относительных процентах или тегах em, но в новом проекте мы решили отказаться от них в пользу пикселей. Аргументов у этого решения несколько. Во-первых, доля браузеров, которые не умеют масштабировать шрифты в пикселях, исчезающе мала. Во-вторых, размеры в абсолютных единицах исключают влияние контекста, а вёрстка абсолютно независимыми блоками — один из основных принципов БЭМ-методологии. Ну и в-третьих, страница результатов поиска должна нормально работать на тач-устройствах. Разрешение экрана на них часто заранее известно и строго фиксировано, а меняться может только его ориентация.
Относительные единицы измерения создают сильную связанность между блоками, а от сильной связанности, как известно, лучше избавляться.
Мне почему-то казалось, что em — идеальная единица для определения ширины в первую очередь. Чем не угодил pt, не понимаю.
НЛО прилетело и опубликовало эту надпись здесь
Но ведь он даёт то, чего хочет автор — отрыв от физических пикселей и учёт только угловых пунктов. Но измерять высоту шрифта в ширине буквы М — это как-то очень странно. Это понятно, когда вы хотите ограничить ширину текстового блока визуально легко воспринимаемым, и ставите ширину что-то вроде 40em (например). Там вне зависимости от размера шрифта блок будет восприниматься комфортно. Но тут-то?
Каскадность, как единственное отличие em от pt автору не нужно и мешает. Я вообще не понимаю, зачем ему em.
Каскадность, как единственное отличие em от pt автору не нужно и мешает. Я вообще не понимаю, зачем ему em.
Каскадность em вызывает больше проблем, чем решает их. Для мелких страниц оок, для больших и сложных — нет. Поэтому есть rem, а про em-ы надо знать и использовать только там, где каскадность действительно нужна. А статье из каменного века а-ля «ура! емы! всем юзать!» уже давно устарели.
А чем плохо использовать pt для установки размера шрифта?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Почему em?