Использование точки (pt) в качестве единицы измерения и их подводные камни
 

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

Я думаю полностью перевести страницу на css3 (с резиновыми градиентами и прочим), использовать шрифты в качестве иконок (http://copypastecharacter.com/), но вот боюсь, что тот или иной браузер, может сильно испортить внешний вид страницы.

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

FINoM,
Пиксели это абсолютная единица измерения в HTML5, зачем тебе пункты?

Nekromancer,
Вот именно, что мне нужна не абсолютная, а относительная, учитывая разный dpi.

FINoM,
Ну допустим новый iPad со своей ретиной. Ты поставишь блоку ширину и высоту в один пиксель, зальёшь его чёрным цветом. Думаешь будет разница с десктопным монитором?

Нет, здесь можно обойтись вьюпортами и прочими нововведениями эппла. Вопрос больше касается десктопных мониторов, ширина которых достигает 2000 пикселей. Стандартом фиксированной верстки де-факто стала ширина 1000 пикселей. На больших мониторах это выглядит убого (много «мертвого» места). Ссылки, кнопки и другие контролы выглядят слишком мелкими.

C чего возник этот вопрос. Сейчас делаем редизайн вот этого плеера: http://vibin.fm (музыка включается автоматически, не пугайтесь). Как видишь, даже на ширине 1280 пикселей, этот прямоугольник выглядит убого. Конечно же, в новой версии плеер станет шире и не таким страшным, но при тех же 2000 пикселях будет выглядеть как говно.

Я думаю, как сделать кнопки, иконки и прочее «резиновыми», выглядящими почти одинаково на разных разрешениях.

FINoM,
Здесь ни пункты, ни емы точно не помогут. Если сильно постараться и верстать всё в процентах, правильно позиционировать и учитывать потоки, то можно добиться того, чего ты хочешь. Только учти, что в таком случае и масштаб же станет больше(ведь ты о нём говоришь?), а люди сидят от монитора на таком же расстояние, ведь разрешение всё больше становится, детали меньше, а расстояние обзора не меняется. Соответственно такой подход не правильный, он будет заставлять пользователей отодвигаться и напрягаться. Правильным будет "адаптивная вёрстка".

Проценты не подходят, я хочу сделать еще и кнопки резиновыми.Я говорю о разных DPI. И не думаю, что увеличение кнопок (при большем разрешении с небольшим DPI) сильно скажется на удобстве восприятия.

Меня больше интересует, что я и указал в первом посте, как ведут себя пойнты на разных ос\мониторах. Я всегда верстал в пикселях, иногда в процентах, но никогда не сталкивался с pt.

Если есть опыт их использования, буду рад выслушать. А об адаптивной верстке мне не интересно, я давно знаю что это такое.

Относительными единицами измерения являются:
em: 'font-size' соответствующего шрифта;
ex: 'x-height' соответствующего шрифта;
px: пикселы, относительно устройства просмотра.

Абсолютными значениями являются:
in: inches/дюймы -- 1 дюйм равен 2.54 сантиметра.
cm: сантиметры
mm: миллиметры
pt: points/пункты - пункт, используемый в CSS2, равен 1/72 дюйма.
pc: picas/пики -- 1 пика равна 12 пунктам.



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

если на бумагу то при необходимости абсолютные .

Бумага то тут причём? Речь идёт об отображении страниц.

Вообще существенной разницы нету:
Просто пункты больше. Однако все они пляшут от одной величины.

Я в самом первом посте написал, что в новой спецификации пиксели абсолютная величина, а вы про css 2 тут рассказываете. Ни разу не актуально.

В общем пиксели в веб странице, давно не пиксели реального устройства.

Это утверждение касается только мобильных устройств (планшетов и смартфонов).Да, косяки какие-то с терминологией, ну да ладно, не суть.

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

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

css3 только в черновиках. на заборе тоже много чего написано.

Почему это? Мы сейчас не говорим о волшебной способности сафари под айось и device-pixel-ratio.
Почему их нет? Ещё нет ни одного устройства, широко используемого, которое точно определяет сантиметры.

Вся соль в том, что как правило, на мобильных платформах плотность точек да, действительно больше. От этого и получается более точная возможность получить реальный размер.
Соответственно при 254 dpi мы можем оперировать сантиметрами, не опасаясь погрешности, однако использование пикселей всё равно будет давать не точный результат. При 254 ppi, уже можно с таким же успехом использовать адекватно пиксели. Более-менее адекватно.
Вот пример разрешения:
Соответственно dpi у нынешних мониторов даже не достирает 100, а в общем 90+. Вот и сравните погрешность.

Ну и верстайте дальше для 6го ие. Ведь это ничё, что все браузеры это давно имлементировали, неее. :)
Конечно метр есть метр. Сложность отобразить маленькие детали, а не большие. Однако метр он один в реальной жизни, а для ваших устройств всегда есть погрешность. Я работал с полиграфической графикой и печатью, нужен очень продвинутый плоттер, что бы напечатать точный размер.

ага конечно, Ща.
<meta name="viewport" content="width=999"/> , и можно менять размер пикселя как вздумается.


для веб-верстки сейчас лучше всего использовать px .

Спасибо, что раскрыл то, что я написал в первом посте. Ими как раз лучше верстать потому, что это абсолютная единица.
А viewport, это особенность айось, а теперь и андроида. И меняется не размер пикселя, в вхождение экрана. То есть это влияет на реальный resolution.
Можно почитать например тут, - http://www.quirksmode.org/blog/archi...el_is_not.html

пиксели — это же вроде абсолютная величина, она не монитором меряется, а стандартами. в учебнике на learn.javascript.ru прочел вчера, уже устарело?)

----------------
перечитал еще раз все посты и совсем запутался. поясните, пожалуйста, что такое пиксели в итоге?

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

px и media-queries