CSS: единицы измерения

К относительным величинам относятся:

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

Можно создать стиль с абсолютными размерами и использовать его только при печатиВообще, абсолютные величины хорошо подходят для ситуаций, когда точно известны физические параметры устройства вывода (недаром они так распространены в полиграфии), но для сайтов годятся мало. Хотя в последнее время часто используется один трюк — создается специальная таблица стилей для печати страниц, так как практически все принтеры работают со стандартным размером листа A4. Подключить такую таблицу стилей можно, используя тег

<LINK TYPE="text/css" REL="stylesheet" MEDIA="print" HREF="print_style.css">

Относительный размер шрифта удобен при «резиновой верстке»Теперь давайте повнимательнее присмотримся к относительным величинам. Для указания размеров шрифтов очень удобно использовать пиксели и величину em. Пиксели отлично работают, когда вам требуется задать определенный размер шрифта какого-то элемента, например

P {font-size: 12px;}

Казалось бы, а зачем нужна «em», которая все равно равна размеру шрифта? Но хитрость в том, что при каскадировании элементы-потомки наследуют свойства элементов-предков. И если вам потребуется, например, указать размер вложенного элемента относительно родителя, то использование величины «em» позволит при изменении дизайна менять только размер шрифта родителя! Например:

P {font-size: 12px;}
STRONG {font-size: 1.2em;}

Кроме того, указание размеров шрифтов в «em» позволит задать их размер относительно шрифта, установленного у пользователя по умолчанию в том случае, если вы в своей таблице стилей нигде не определили фиксированный размер. Такой способ позволяет сохранить единый стиль отображения документа для пользователей с разными мониторами и разным качеством зрения — уж шрифт по умолчанию-то они для себя настроили!

Величина em не поддерживается старыми браузерамиНедостаток величины «em» заключается в том, что она некорректно поддерживается старыми браузерами, поэтому, если вам необходима их поддержка, придется от нее отказаться.

Отличие «em» и пикселей заключается в том, что пиксели «привязываются» к устройству вывода. 1 пиксель будет иметь один и тот же размер на данном устройстве, в то время как размер 1 em зависит от размера шрифта в элементе-предке.

Размер пикселя «привязан» к конкретному устройству выводаКазалось бы, что пиксель, как и, скажем, миллиметр будет по-разному смотреться на мониторах с разным разрешением. Действительно, если вы зададите фиксированный размер шрифта (в пикселях) и переключите монитор, скажем, в режим 640х480, то обнаружите, что шрифты стали очень уж крупными (так как изменился размер пикселя). Но прелесть в том, что пользователи сами настраивают для себя оптимальное разрешение экрана в зависимости от монитора и своего зрения! То есть если пользователь не очень хорошо видит, то он обычно устанавливает низкое разрешение монитора, и шрифты начинают казаться крупнее. Пользователь же с нормальным зрением, скорее всего, установит разрешение в зависимости от диагонали своего монитора, и размер шрифта «автоматически» подгонится под его восприятие...

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

Указание размера в процентах также является привычным для тех, кто писал документы на HTML. Процент — он процент и есть: указывает размер относительно элемента-предка. В принципе, вместо указания размера шрифта с помощью величины «em» можно использовать и проценты, но делают это достаточно редко. Чаще всего в процентах указывают размеры блоков, отступы, высоту строки и тому подобное.

Ссылки по теме

• Что такое каскадные таблицы стилей (CSS)
• CSS: определяем элементы