(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Почему em?

Источник: habrahabr
grokru

Это перевод заметки Криса Койера Why Ems?(http://css-tricks.com/why-ems)

Я долгое время применял px для установки font-size, из-за чего размер шрифта не мог меняться в Internet Explorer 6-8. Переход на em имеет ряд преимуществ, и в этой статье они детально рассмотрены.

Изменение размеров шрифтов на разных экранах

Это основная проблема "пиксельных" размеров. К примеру, в CSS-стилях сайта font-size разных элементов типографики задан 50 раз  в пикселях. В этом случае, используя media queries для масштабирования, придется настраивать каждый из этих 50 font-size. Однако если задавать размеры вem, то потребуется внести изменения только в теге body и свойство будет наследоваться:

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

Разные пиксели

Значение px - это не то же самое, что физический пиксель экрана. Подробнее о разнице написано в статье CSS px is an Angular Measurement.

Относительные отступы

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

Связи

Вообще, если все размеры в CSS задавать в em - font-size, margin, padding, то между дизайном и типографикой будут более гибкие связи - станет гораздо проще вносить правки без ущерба внешнему виду.

Ложка дегтя

Все же у em есть несколько неприятных недостатков, например "каскадность": если задать элементам обычного списка (li) font-size: 1.1em, то дочерние (вложенные) элементы будут суммировать это значение. Решить проблему можно применением li li { font-size: 1em; }, однако это очень муторно. Тут может помочь назначение размеров шрифта в rem, однако не все браузеры поддерживают этот способ (IE 9+).

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


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 13.11.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
ESET NOD32 Антивирус - лицензия на 2 года на 3ПК
AutoCAD - mobile app Premium CLOUD Commercial New Single-user ELD Annual Subscription
ABBYY Business Card Reader 2.0 for Windows (download), электронный ключ
Rational ClearQuest Floating User License
YourKit Profiler for .NET - Floating License - 1 year of e-mail support and upgrades
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Новые материалы
Мир OLAP и Business Intelligence: новости, статьи, обзоры
Один день системного администратора
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Купить часы (3)
Подскажите, где можно купить часы по хорошей цене?
 
Лучшие букмекерские конторы и бесплатные прогнозы (1)
Мы делаем честные рейтинги букмекерских контор https://superbet.guru/, в основе которых лежит...
 
Легализация покера в Украине. Ваши мнения (1)
Прочел тут тему на портале о покере в Украине https://poker.ua/ , что как бы легалайз. Но куча...
 
Арго на деньги (2)
Интересная и захватывающая игра на деньги в казино Argo https://zerkalo-argo-casino.site/ это...
 
Кухня (7)
Хочу сделать ремонт на кухне. Где приобрести кухонную плиту? Какой фирмы стоит её рассматривать?
 
 
 



    
rambler's top100 Rambler's Top100