[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Зачем использовать em в CSS ?
Дата: Среда, 03.04.2013, 16:33 | Сообщение # 1
Администраторы - Толик
  • Сообщений: 5
  • Репутация: 2
Долгое время я задавал размер шрифта (font-size) лишь в пикселях. Сейчас я полностью переключился на em. Мое сознание поменялось. Почему? Я наконец нашел весьма убедительные причины, которые я постараюсь изложить чуть ниже.

Вам не потребуется менять размер шрифта под разные размеры экрана
Один и тот же размер шрифта выглядит не одинаково хорошо на мобильных устройствах и больших мониторах. Текст должен быть немного больше на больших экранах. Скажем, вы изучаете свой файл стилей и находите 50 различных объявлений с font-size в пикселях.
Но предположим, вы поменяли все пиксели на em.
Теперь посредством медиа-запросов вам потребуется изменить размер шрифта лишь у одного тега body, чтобы откорректировать все 50 объявлений в документе (каскадность в действии).

CSS
Цитата
body {
  font-size: x-large;
}
@media (max-width: 1000px) {
  body { font-size: large; }
}
@media (max-width: 500px) {
  body { font-size: medium; }
}


Цитата
Каскадность
Тег использует не только те объявления, которые назначены непосредственно для него, но и собирает каскад стилей от вышестоящих родителей. Это и есть каскадность в CSS.

Все относительно

Писксели (px) в CSS имеет мало общего с физическим пикселем на вашем экране.

Цитата
Физический пиксел - самые маленькие элементы любого монитора.

Относительное пространство (отступы или padding)
Предположим, в своем дизайне вы используете небольшие изображения (иконки). Вы хотите поместить иконки в заголовки. Вы хотите, чтобы размер иконок был соизмерим с размером заголовков. Вы не можете назначить заголовку объявление padding-left: 20px, так как левый отступ всегда будет равен 20px в независимости от размера заголовка. Но если вы назначите заголовку левый отступ в em, то вы сможете регулировать отступ относительно размера шрифта заголовка.

Отношения
Если вы везде используете em, то вы можете использовать em и при регулировке отступов (padding) и полей (margin) для всего документа. Это значит что, если вы уменьшите шрифт у тега body, пространство вокруг сайта также уменьшится. Этим вы свяжете дизайн вашего сайта с типографикой, что в некотором роде облегчает общую настройку внешнего вида сайта.
Незначительные нюансы
Есть несколько неприятных моментов у em, связанные с каскадностью. Если вы для элемента списка назначите объявлениеfont-size: 1.1em и затем создадите вложенный список, то у вложенного и последующих вложенных элементов списка будет расти размер шрифта. Вы можете исправить это, назначив li li { font-size: 1em; }, но такими правилами можно сломать голову. Вот где на помощь может придти rem, но это проблематично, так как поддержка реализована в браузерах начиная IE9+.

Для общего развития:
Цитата
Плотность экрана - количество физических пикселей дисплей.

Цитата
CSS-пиксели - абстрактная величина, используется браузерами для отображения контента вне зависимости от типа экрана.
  • Страница 1 из 1
  • 1
Поиск:

Администрация проекта не несет какую-либо ответственность за
публикуемые пользователями материалы. Хостинг от uCoz.
Главный администратор сайта - Tolik.
Дизайн от life_man, верстка от sp1nn15.