В прошлом веб-дизайнеры для задания размеров верстки в основном использовали единицы em вместо пикселов, поскольку более ранние версии Internet Explorer были не способны изменять масштаб текста, величина шрифта которого задана в пикселах. Современные браузеры уже могут изменять масштаб текста на экране, даже если его размер был указан в пикселах. Так почему же использование единиц em вместо пикселов по-прежнему предпочтительнее? На то есть две очевидные причины: во-первых, любой, кто до сих пор использует Internet Explorer 6, автоматически получит возможность изменять масштаб текста, а во-вторых, это значительно облегчит жизнь вам как разработчику. Размер в em зависит от размера соответствующего контекста. Если мы зададим для тега <body> размер шрифта 100% и стилизуем остальную верстку с использованием em, то все эти шрифты будут подвергаться воздействию со стороны начального объявления. В результате, например, если после того, как мы зададим весь необходимый шрифтовой набор, наш клиент попросит сделать все шрифты немного больше, нам потребуется изменить лишь размер шрифта для <body>, а все остальные значения верстки изменятся соответственно этому.
Используя нашу прежнюю формулу ширина цели х ширина контекста = результат, я преобразую все размеры шрифтов на основе пикселов в значения, выраженные в em. Вам стоит знать, что все современные настольные браузеры используют 16px в качестве размера шрифта по умолчанию (если только другое значение не будет задано явным образом). Следовательно, изначальное применение любого из приведенных далее правил к тегу <body> обеспечит одинаковый результат:
Font-size: 100%; font-size: 16px; font-size: 1em;
Например, первое значение размера шрифта на основе пикселов в нашей таблице стилей определяет величину символов в названии сайта And the winner isn’t., указанном вверху слева:
#logo {display: block; padding-top: 75px; color: #0d0c0c; text-transform: uppercase;
Font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 48px;
}
#logo span {color: #dfdada;}
Следовательно, 48 х 16 = 3. Таким образом, наш стиль изменится:
#logo {display: block; padding-top: 75px; color: #0d0c0c; text-transform: uppercase;
Font-family: Arial, "Lucida Grande", Verdana, sans-serif; font-size: 3em; /* 48х 16 = 3*/
}
Аналогичную логику вы можете применить и далее в коде. Если на каком-то этапе что-то начнет «барахлить», вероятно, это происходит из-за того, что контекст для вашей цели изменился. Например, взгляните на элемент <h1> в разметке нашей страницы:
<h1>Every year <span>when I watch the Oscars I’m annoyed….</span></h1>
Наш новый CSS-код на основе em будет выглядеть так:
#content h1 {font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; font-size: 4.3125em;} /* 6Эх 16 */
#content h1 span {display: block;
Line-height: 1.052631579em; /* 40х38 */ color: #757474;
Font-size:.550724638em; /* 38х69 */
}
Как вы можете здесь видеть, размер шрифта (который был равен 38 пикселам) элемента <span> зависит от размера шрифта родительского элемента (который был равен 69 пикселам). Более того, для свойства line-height (имевшего значение 40px) значение задается в зависимости от размера шрифта как такового (который был равен 38 пикселам).
ЧТО ЖЕ ТАКОЕ EM?
Термин «em» определяет способ выражения буквы М в письменной форме и произносится как есть. Исторически сложилось так, что буква М стала использоваться для установления размера шрифта из-за того, что является самой широкой из всех букв. В настоящее время em как единица измерения определяет соотношение ширины/высоты конкретной буквы и размера конкретного шрифта в пунктах.
Итак, теперь наша структура изменяет свои размеры и мы преобразовали значения на основе пикселов в показатели, выраженные в em. Однако нам еще нужно выяснить, как масштабировать изображения по мере изменения размеров области просмотра, так что сейчас и займемся рассмотрением этой темы.
Добавить комментарий