Где вы используете размеры в em?

Question

[dastik]

Уважаемые опытные верстальщики, фронт-енд разработчики, где, на каких участках сайта вы используете размеры в em для верстки?

Comments

[Юрий Лобанов]

Автор, Вы не согласны с ответами? Где реакция, для чего задавали вопрос?

[dastik]

@iiil просто мне хотелось услышать мнение от других несколько человек, не только от вас

[Юрий Лобанов]

@dastik Вы удивитесь, но у данного вопроса не может быть мнений. Спор под моим ответом касается px. em — типографская единица, этим все сказано. Она для текста и связанных с ним размеров.

[dastik]

@iiil ну все, я отметил вас как решение, благодарю Вас.

[dastik]

@dastik а вы верстальщик или дизайнер, сайты верстаете?

Answer 1

[Юрий Лобанов]

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

Comments

[Deerenaros]

Забудьте про пиксели. Сегодня уже очень много устройств с нестандартным dpi.

[Юрий Лобанов]

@Deerenaros очень много — это сколько? Мы сейчас говорим о реалиях или будущем? Вы видимо из тех, кто заказчику доказывает, что не надо поддерживать ie8 ни в одном проекте, да?

[Евгений Петров]

@Deerenaros и причём тут em? Каким боком?

[Deerenaros]

@iiil о реалиях. К сожалению, у меня уже давно закончились мониторы с dpi 96. Есть меньше - TV. Есть больше - пара мониторов, кучка планшето-телефонов и ноутбук. И везде интерфейс... тупит. Лишь несколько ресурсов нормально (читай - везде одинаково) работают, большинство из них - блоги вэб-дизайнеров.

[Deerenaros]

@Petroveg При том, что em - зависит от шрифта. Что тоже не плохо. А порой - идеально.

[Евгений Петров]

@Deerenaros размеры матриц, разрешение мониторов и ppi (именно pixel, а не dot) не имеют к em никакого отношения.

[Deerenaros]

@Petroveg похоже, мы друг друга не понимаем. Я к тому, что почти все ОС нормально масштабируют только текст используя DPI. Всё остальное, что Шиндошс, что *никсы - через Ж. Ну, если правильно готовить, то всё будет ОК, вопрос в том - кто умеет правильно готовить? Вот и получается...

Терять пусть и небольшую часть, но всё же аудиторию из-за двух букв - глупо.

И да, PPI. Но сути это не меняет.

[Евгений Петров]

@Deerenaros я ничего не понимаю...

1. Разрешение экрана ну никак с абстрактными em не связано. Шрифт для корневого элемента задаётся в настройках браузера. Это значит, что сайт, для которого сетка выстроена в em, слетит при любом изменении размера шрифта в html.

2. Пиксели были, есть и будут основой построения viewport. Более того, именно пиксели используются для Media Queries. Так же как и абсолютные величины. А вот никакие em в Media Queries не используются. Потому что никому неизвестно, что это такое.

3. Единственные величины, могущие связать размер шрифта и размеры клиентской части области просмотра — vmin, vmax, vh, vw. Которые считаются от размера viewport, то бишь в пикселях.

Из этого всего следует, что размеры в em нужно задавать ровно там, где и указал @iiil — для шрифтовых элементов. А модульную сетку на em не строят.

[Deerenaros]

@Petroveg В смысле не строят. Вот прям за всех строителей и говорите?

Я, конечно, не про дизайнер, но общался с большим количеством таковых. Почти все говорят, что пиксели - зло. Их всё ещё используют, везде и все, но очень надеяться, что когда-нибудь от них просто избавятся - банально потому, что на Chromebook Pixel это смотрится "не очень". Ну то есть как не очень. Интерфейс почты: куча мелких строк. Читаемо... Тем у кого с зрением хорошо. И вроде даже очень много всего помещается, но пару сантиметров от ноутбука отдалился - и уже как-то не очень.

Не поймите меня неправильно, использовать кегель для сетки - немного неправильно. Но и прописывать сотню констант - не лучший вариант.

[Евгений Петров]

@Deerenaros пиксели были, есть и будут. Все современные мобильные устройства позволяют определять и поворот, и разрешение.

Ваши почти все дизайнеры всё так же рисуют макеты в попиксельном Photoshop, который изначально не предназначен для Web. Что не мешает умничать насчёт em. Чтобы и вам, и им было понятно, всё происходит от корневого элемента html. И вот же незадача — задавать размер шрифта в нём нужно в пикселях.

Вы привели пример, когда кто-то нарисовал в макете маленький шрифт, а другой не понимает, как использовать Media Queries.

Мы говорим про то, что всё уместно там, где уместно. Сетка, как и разрешение устройств, была и будет в пикселях. А текстовые элементы в кегле, который происходит, тем не менее, от пикселей в html.

[Deerenaros]

@Petroveg Ну давайте не зарекаться про пиксели. Не так давно их и не было вовсе. Возможно, скоро мы к этому ещё вернёмся - качество оно и в Африке качество.

Что до макетов. Пиксель пёрфект вёрстка - хорошо. Но это уже далеко не мода. Мода - bootstrap. И, о пролетариат, я сильно удивлюсь, если кто-то в фотошопе будет рисовать под bootstrap - это как минимум бессмысленно. Вёрстка - задача именно дизайнера, там не требуется программирование. Копипаст скриптов не в счёт. Программист должен заниматься логикой и "матанизированной" областью "дизайна" (читай - сложные анимации в том числе с логикой).

И никаких примеров "в макете маленький шрифт" я не приводил. Самое интересное - мы открыли тогда gmail. Ресурс гугла. ОС гугла. Ноут создавался под руководством гугла. А вышло... как минимум сомнительно. У меня со зрением ОК. Пока ОК. Мне должно быть по барабану, но иногда я занимаюсь тем, что думаю о других.

[Евгений Петров]

@Deerenaros не было пикселей?)) Про зернистость плёнки не слышали? А про линеатуру? А про пресловутые dpi?
Размеры будут всегда. В абсолютных величинах, а относительных — неважно. При этом мне непонятно, что вы предлагаете в ответ.

Размер шрифта в html (это тот, который rem), задаётся (о боже!) в пикселях. Не вопрос — можете задать его в... vh, vw. Стоп, так они же тоже в пикселях:) То есть одна относительная величина задаётся в другой относительной величине. И это типа круто?

Теперь про бутстрап. Который с помощью препроцессора переводит колоночки в проценты. В проценты от чего же? От пикселей... Вот же незадача.

Для необходимости изменять размер шрифта введены Media Queries. И да — внутренние элементы наследуют размер кегля шрифта родителя и меняют его с помощью процентов. Ну или em, что одно и то же. Но модульную сетку не строят в em.

[Юрий Лобанов]

@Deerenaros ну бутстрап Вы вообще зря приписали, он как раз против Вашей теории говорит. Его минус как раз в том, что он все размеры через пиксели задает.
Ребята, Вы вообще о чем? Вы меня поправьте если что не так :)
Был пиксель. Сначала экран был 800 на 600, а точнее и меньше, 640 был. Потом стал расти в ширь, и рос, и рос. И стал экран 1920 и больше. И что же? А то, что научились делать размер точки (пикселя) настолько малый, то экран в 24 дюйма помещал уже их в несколько раз больше, чем было. Ну и тут два варианта, первый - оставить все как есть, но тогда физический размер картинки в 100 на 100 точек будет неразличим для глаза. И придумали ориентироваться на старый добрый пиксель, но иметь в виду, что внутри него несколько пикселей реальных влезает. Это я простым языком говорю, уж не ругайтесь. Суть изменилась? Нет, ничего не поменялось. И как правильно сказал @Petroveg — зерно было всегда.
@Deerenaros А теперь главное — Вы вообще как связываете пиксель и em? Вы не понимаете сути этих величин, а я говорю именно о сути. Совершенно не важно, какими единицами Вы пользуетесь, но! em и другие типографские единицы надо использовать для шрифта и связанных с ним величин. А абсолютные единицы для других вещей. Даже типографы не задают размеры некоторых величин в типографских единицах, а они знают толк.
Что Вы предлагаете использовать вместо пикселя? просветите нас.

[Евгений Петров]

@iiil уже столько раз такая тема поднималась:)
Вот последние мои пояснения про пиксели Почему нужно задавать в em, а не px?

Answer 2

[Vladislav Soprun]

Еще она отлично масштабируется и ее использую для указания размера элементов.
Что касается сетки то лучше использовать не EM, а REM так как размер считается по другому..
Так же посмотрите на VH и VW...

Comments

[Евгений Петров]

А потом захочется поставить не 16px в root (он же html), а 24px. И поехала к чёрту такая вёрстка.

[Vladislav Soprun]

@Petroveg Конечно нет! Ведь не кто не высчитывает подобные вещи в калькуляторе, а используют препроцессоры LESS, SASS и т.д.
Задается базовый размер шрифта и от него считаются...
Простой пример:
@font-size: 24px;
@em: ( 1em / @font-size );

#content {
width: @em * 980;
}

После компиляции получаем верный результат!

[Евгений Петров]

@vlsoprun ну так вы в пикселях и задаёте, просто через жопу.

[Vladislav Soprun]

@Petroveg Все браузеры преобразовывают в конечное число, то есть в PX.
Речь шла об "А потом захочется поставить не 16px в root (он же html), а 24px. И поехала к чёрту такая вёрстка."

Вот Вам пример: codepen.io/vlsoprun/full/fxmHG

Можете проверить свое мнение об "И поехала к чёрту такая вёрстка", пожалуйста измените @font-size на 24px и посмотрите что все значения пересчитались и верстка ровная...

[Vladislav Soprun]

codepen.io/vlsoprun/pen/fxmHG

[Евгений Петров]

@vlsoprun поставил. Как и ожидалось, всё улетело.

#main {
	width: 980px;
	margin: 0 auto;
	font-size: 32px;
}

[Евгений Петров]

@vlsoprun кстати, а что тут 900px делает?))

[Vladislav Soprun]

@Petroveg Размер em считается от размера шрифта родителя.
Если вы увеличиваете размер родителя то и все внутренние элементы будут больше.

А REM, то html..

В данном случаем мы рассматриваем em'ы...

И наверное я не верно излагаю свою мысль, но все же повторюсь.
Препроцессор LESS необходимо компилировать, для создания CSS файлов и стилей в нем.

Изменив размер шрифта у себя в браузере нечего не даст кроме кривизны таковую Вы мне показали..

Откройте codepen.io/vlsoprun/pen/fxmHG, измените размер "@font-size: 14px;" (33 строчка) например на 24px и посмотрите что верстка стоит на месте.

#main {
	width: 980px;
	margin: 0 auto;
	font-size: 32px;
}

В данном случае вы меняете размер родителя!

[Евгений Петров]

@vlsoprun можно мне объяснить, зачем это вообще нужно? Получать абсолютно те же пиксели?

Результат ровно такой же, как было бы при задании размеров в пикселях. Зачем это извращение вообще нужно?

[Vladislav Soprun]

@Petroveg для корректного масштабирования... У разных экранов свои dpi, да и браузеры как хотят так и отображают...

В отличии от строгих единиц (px) относительные ( %, em, rem. vh и т.д.) хорошо масштабируется и как правило не вызывают проблем..

Для адаптивных или для резиновых макетов они просто не заменимы.

Есть такое папаверине:
Если вы закончили с версткой... Уменьшите размер страницы до 25%, если ни один элемент не съехал то вы и в правду закончили...

К сожалению строгие единицы порой не так хороши чем относительные, но опять же если нужна адаптация, а для большинства сайтов и px норм.

[Vladislav Soprun]

@Petroveg Вот товарищ @rodionme ниже ответил )

[Евгений Петров]

@vlsoprun бог ты мой... Да вы просто не знаете, что пиксели — относительные единицы. Вы бы в теории подковались для начала.

[Vladislav Soprun]

@Petroveg Спасибо, приму Ваш совет )

[Евгений Петров]

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

И вот ведь — это всё пересчитается в пиксели.

[Vladislav Soprun]

@Petroveg вроде я уже тоже самое написал "Все браузеры преобразовывают в конечное число, то есть в PX.", только более кратко ))

Я знаю разницу, да и читал htmlbook.ru/content/edinitsy-izmereniya
Однако PX хоть не абсолютная единица измерения, все же предпочитаю к ней так относиться.
У нее нету четких определений в см, м. или километрах, но все равно она более менее жесткая единица.

Что 100 px на ноутбуке что 100 px на телефоне с ретиной, разницы в масштабировании "нету".
Да нету, определения в см, но прислонив телефон к монитору разницы Вы не заметите.

[Евгений Петров]

@vlsoprun вы можете относиться как угодно, даже придумать, что пиксель — кусочек вселенной, но он останется величиной относительной, не имеющий никакого физического смысла, кроме как единицы дискретности экрана.

Ваш пример с заданием сетки в em только продемонстрировал, что вы мыслите всё равно пикселями. И по-другому не получится. И для хороших проектов будут рисовать много экранов для разных диапазонов разрешений экрана.

А для их реализации будут использованы Media Queries и meta name="viewport".

[Vladislav Soprun]

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

Answer 3

[Родион Мещеряков]

Для текстовых элементов и размеров, которые напрямую зависят от размера шрифта.
Сильно помогает при верстке адаптивных сайтов и мобильных HTML5-приложений. Хотя для последних удобнее использовать rem.