Какие единицы длины больше подходят для Web. Как вы помните, в языке HTML применялись всего две единицы измерения: пиксели и проценты. С их помощью можно было задавать линейные размеры таблиц и их ячеек, разделительных линий, изображений и отступов вокруг них, размеры областей встраиваемых объектов и размеры фреймов. Кроме этого, в HTML существовала специальная шкала от 1 до 7 для задания размеров шрифта.
Размеры разделительных горизонтальных линий (HR) можно было задавать, например, так: <HR width="100"> Здесь ширина линии задается равной 100 пикселям. Другой пример: <HR width="100%"> В этом случае ширина линии будет равна 100% ширины контейнера, в котором находится эта линия. Если она находится просто на странице, то ширина будет равна ширине окна браузера. Если же разделительная линия находится, например, внутри ячейки таблицы, ширина которой составляет 200 пикселей, то и ширина линии будет равна 200 пикселей.
В CSS доступен гораздо более широкий набор единиц измерения, среди которых есть уже привычные для Web-разработчика пиксели и проценты, а также появились и новые. Часть из них взята из реальной жизни:
in — дюйм (примерно 2,54 см);
cm — сантиметр;
mm — миллиметр.
Другие "перекочевали" из полиграфии, где они используются для определения параметров текста при его подготовке к типографской печати. Это такие величины:
pt — пункт (1/72 дюйма);
рс — пика (1/6 дюйма или 12 пунктов);
ех — высота строчной буквы "х" шрифта, эта величина не имеет названия.
Пункт - очень привычная единица измерения для тех, кто часто пользуется текстовыми или графическими редакторами. В этих редакторах в пунктах задается размер шрифта. Остальные единицы измерения хорошо знакомы, пожалуй, только полиграфистам.
И наконец, непонятные в реальном мире единицы измерения, которые принято называть относительными, поскольку они вычисляются относительно какой-то другой величины. Это такие единицы:
em — единица, вычисляемая относительно размера шрифта элемента;
рх — пиксель; его размер зависит от устройства отображения (монитора, экрана мобильного телефона или карманного компьютера);
% — процент; вычисляется относительно размера элемента-предка.
Две последние единицы из группы относительных величин присутствовали уже в HTML, поэтому хорошо знакомы авторам HTML-страниц. Это одна из причин, по которой из всех величин, доступных в CSS, разработчики продолжают пользоваться именно ими. Но причин на самом деле несколько, и некоторые из них довольно существенны.
Единицы измерения, пришедшие в CSS из реального мира, не вполне подходят для описания мира виртуального. Мониторы пользователей могут иметь совершенно разные физические размеры и разрешения. Кроме этого, у разных операционных систем могут быть разные экранные разрешения: от 72 до 96 пикселей на дюйм. Создатель Web-страницы не может заранее знать, какие параметры будет иметь монитор, на котором пользователь будет просматривать создаваемый им сайт. Как правило, чем больше диагональ монитора, тем больше и разрешение монитора, устанавливаемое пользователем. Диагональ современного монитора может варьировать от 15 до 24 дюймов, а разрешение соответственно от 800x600 до 1600x1400. Конечно, можно ориентироваться на средние показатели, но это не будет правильно.
Рассмотрим простой пример: допустим, мы хотим установить размер шрифта для основного текста на странице. Размер шрифта в 1 см может показаться огромным на маленьком мониторе (так же, как и при печати на бумаге), а для чтения на большом экране это будет вполне нормальный размер. Если при описании документа мы будем пользоваться единицами измерения реального мира, например дюймами, то не сможем предсказать, какой действительный размер будет иметь шрифт на экране каждого пользователя. Если задать размер шрифта в реальных единицах измерения, то браузеру все равно придется их предварительно перевести в пиксели и лишь потом отобразить. В зависимости от экранного разрешения монитора (72 или 96 dpi), результат может получиться различным. И мы никак не сможем заранее предсказать, какого размера шрифт увидит пользователь у себя на экране.
То же относится и к величинам, пришедшим из полиграфии, поскольку и пункты, и пики можно легко перевести в дюймы и сантиметры. Несмотря на это, в текстовом редакторе мы смело оперируем пунктами в качестве единиц измерения, поскольку в конечном итоге документ создается для дальнейшей распечатки на бумаге, и мы заранее знаем размер листа, на котором будет распечатан текст. Кроме того, мы часто также знаем качество печати и разрешение печатающего устройства. В случае с подготовкой Web-страниц мы находимся в полной неопределенности.
По большому счету, размер пикселя тоже зависит от размера и экранного разрешения монитора, но пользователь все же подбирает удобное и комфортное для себя разрешение. Задача создателя Web-страницы - сделать ее удобной для чтения. Если шрифт слишком мелкий, то читать его будет неудобно. Если шрифт слишком крупный, то читать такой текст, конечно, удобнее, чем мелкий, но экранное пространство при этом расходуется нерационально. Пользователю всегда хочется, чтобы как можно больше полезной информации разместилось на одном экране.
Если для создания страницы используется "фиксированный" дизайн, т.е. размеры всех структурных блоков страницы заданы жестко, то единственной допустимой единицей длины в этом случае является пиксель. Если вы воспользуетесь другими единицами, то дизайн при этом может просто развалиться из-за неточностей перевода этих единиц в пиксели на разных платформах и разных мониторах.
Проценты — незаменимая величина при "резиновой" верстке, когда необходимо, чтобы страница занимала все доступное ей пространство. Независимо от того, каков размер монитора пользователя и какое у него разрешение, таблица шириной 100% будет по ширине совпадать с шириной окна.
Величина em незаменима для пропорционального увеличения размера текста, высоты строки, межсимвольных интервалов и расстояний между словами. Если необходимо на 20% увеличить размер шрифта по сравнению с базовым, то достаточно указать размер 1.2 em. И каким бы ни был базовый размер шрифта, новый размер будет высчитан корректно. Такого нельзя добиться, используя типографские единицы измерения, - из-за погрешностей перевода их в пиксели и неопределенности в параметрах устройства вывода текста.
