em, rem, % и иже с ними

[abused]

Всем большой трям. Постараюсь изложить суть:

1. Надо пользовать «резину» и адаптивность — т.е. @media-query, % от ширины, и т.д.

2. Привязку к базовой сетке обязательно надо тоже. Т.е. горизонтальное выравнивание (не путать с сеткой колонок).

Оба пункта решаемы, если пользовать px в качестве единицы измерения и для элементов интерфейса (кроме резиновых), и для текста. Раньше я так и делал, все были счастливы (катастрофа с масштабированием шрифтов в древних версиях IE уже неактуальна, везде работает зум), особой надобности в этих ваших em-ах долгое время не было.

Но с появлением дисплеев высокого разрешения (всякие там Retina), пиксель стал не совсем пикселем в привычном смысле. Снова возникла надобность в относительных величинах для веб-типографики. Например, классический подход 62.5% и em/rem.

Итак вопрос-размышление на тему того, как сохранить "абсолютную" пиксельную предсказуемость растрового дизайна при "относительно" заданном тексте, но при этом сохранить вертикальный ритм (базовую сетку)?

[USF]

ретина УГ. никто не будет делать сайты под их дисплеи, потму что зачастую нужно 2 варианта графики.

на хабре была отличная статья по этому поводу, не припомню уже ссылочки

ЗЫ: em % это наше все.

Edited October 17, 2012 by USF

[abused]

ЗЫ: em % это наше все.

Где-то попадалось мнение о том, чтобы текст и типографику задавать в em/rem, а для всего остального указывать px/%. Можно какие-то рассуждения в пользу этого подхода, или критику? Искал статьи по теме, но тему сисек для себя так и не раскрыл. Важно сохранить вертикальный ритм, и чтобы нарисованная дизайнером растровая графика не поплыла ( понимаю, что SVG можно, но это не всегда приемлемо).

[USF]

вообще это все очень спорно.

тот же EM это те же пиксели, только в профиль. Отсчет идет от базовой величины задаваемой пикселями(на самом высоком уровне - 1em - 16px).

А вот % это уже другое дело(если конечно они не высчитываются от пиксельного родителя).

использование EM попросту удобнее, так как является "скелейбл". Поменял вверху - пересчитались родители. Margin и Padding имеющие непосредственное отношение к шрифтам и написанию(отступы от H и тд) удобно делать через EM, так как в зависимости от шрифта отступ будет подстраиваться.

Насчет графики - я не пойму, а почему она должна "поплыть"?

[abused]

Насчет графики - я не пойму, а почему она должна "поплыть"?

Например, когда текст не умещается в элемент, у которого задан растровый фон. Или же что-то одно будет наползать на другое.

Может я и не совсем правильно выражаюсь, или не въехал в суть использования разных измерений.... хз.

Или когда имеем форму, декорированную графическими плюшками, внутри которой текст, заданный в em-ах.....

Edited October 17, 2012 by abused

[USF]

начинаю понимать. вы в плане, если текст вылазит за границы графических элементов?

ну тут дело такое..как бы графические элементы которые привязывают к определенными размерами использовать крайне не желательно..да и уже технологии дошли до такого уровня, когда многое можно сделать на CSS. а уже если там навороченная графика, то тут выхода нет - либо в рамках дозволенного либо все ломается. можно еще конечно издеваться и масштабировать(это нужно <img> использовать, фон вроде пока плоховато масшабируем)..но не стоит оно того

[abused]

начинаю понимать. вы в плане, если текст вылазит за границы графических элементов?

Совершенно верно!

Может конечно это и психоз какой, или я не успел еще въехать в тему... С мелких лет просто привык работать в какой-то одной системе, и не смешивать котлеты с мухами.

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

[klierik]

пишу px+rem.

в целом доволен, ибо em достал в свое время.

[mishka]

<meta name="viewport" content="initial-scale=1.0">

Разве этого не хватает чтобы привести на ретине пиксели до нормольного вида и верстать пикселями не парясь?

[USF]

он не только про это, насколько я понял.

про масштабируемость и относительные величины графических элементов

[mishka]

Ну дык картинке хоть в чем угодно размер задавай -- на ретине она будет хуже выглядеть.

Для ретины делают или в svg, или другую картинку, в 4 раза бОльшую.

[USF]

я не о том) он не только про ретину, но и про разные масштабы и разрешения.

типо чтобы вся графика подгонялась и везде выглядело одинаково.

вечный сюжет, в общем

[mishka]

АА понял

Ну тогда с ретиной как раз таки все в порядке, а вот, например, Galaxy S3 с его мелким пикселем, вот в нем действительно будет маленькое, если в пикселях задавать.

[mishka]

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Накидал тестовую страничку. Добавил метатег, и проверил как на ретине(4й айфон), так и на андроиде 4м (540х960) (HTC Sensation XE, вобщем мелкий пиксель) -- все отлично отображается и читается и масштабируется. Размеры шрифта и размеры блоков задавал в пикселях.

Все нормально отображается. Не могу понять зачем сложности с % и rem?

"Путей мы легких не искали"(с) ?

[abused]

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Накидал тестовую страничку. Добавил метатег, и проверил как на ретине(4й айфон), так и на андроиде 4м (540х960) (HTC Sensation XE, вобщем мелкий пиксель) -- все отлично отображается и читается и масштабируется. Размеры шрифта и размеры блоков задавал в пикселях.

Все нормально отображается. Не могу понять зачем сложности с % и rem?

"Путей мы легких не искали"(с) ?

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