Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Использование точки (pt) в качестве единицы измерения и их подводные камни (https://javascript.ru/forum/xhtml-html-css/26573-ispolzovanie-tochki-pt-v-kachestve-edinicy-izmereniya-i-ikh-podvodnye-kamni.html)

FINoM 13.03.2012 18:02

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

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

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

Nekromancer 13.03.2012 18:22

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

FINoM 13.03.2012 18:24

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

Nekromancer 13.03.2012 18:27

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

FINoM 13.03.2012 18:36

Цитата:

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

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

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

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

Nekromancer 13.03.2012 18:42

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

FINoM 13.03.2012 18:53

Цитата:

Сообщение от Nekromancer
Если сильно постараться и верстать всё в процентах

Проценты не подходят, я хочу сделать еще и кнопки резиновыми.
Цитата:

Сообщение от Nekromancer
Только учти, что в таком случае и масштаб же станет больше

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

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

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

vflash 13.03.2012 19:23

Цитата:

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

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

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



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

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

Nekromancer 13.03.2012 19:29

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

Distance Units: the ‘<length>’ type

5.1. Relative lengths
5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’ units
5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units

Вообще существенной разницы нету:
Цитата:

‘px’ pixels; 1px is equal to 1/96th of 1in
‘pt’ points; 1pt is equal to 1/72nd of 1in
Просто пункты больше. Однако все они пляшут от одной величины.

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

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

FINoM 13.03.2012 19:34

Цитата:

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

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

Сообщение от vflash
Относительными единицами измерения являются

Да, косяки какие-то с терминологией, ну да ладно, не суть.

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


Часовой пояс GMT +3, время: 20:53.