Прошло более трех лет с тех пор, как я в последний раз писал о размере шрифта CSS . В течение десятилетия мы были заполнены непоследовательными ключевыми словами (маленькие, средние, большие и т. Д.) И некорректными фиксированными единицами (px, pt, mm). В то время как проблемы, связанные с px в Internet Explorer, исчезли,% и em остались лучшими решениями, особенно для адаптивных проектов.
К счастью, CSS3 предоставляет нам несколько новых альтернатив …
рем
Одна проблема, связанная с процентным соотношением и изменением размеров, — это сложная каскадная головоломка! Рассмотрим этот базовый пример …
<style> body { font-size: 100%; } p, li { font-size: 0.75em; } </style> <p> 12px text </p> <ul> <li> 12px text <ul><li> 9px text </li></ul> </li> </ul> Единицы em относятся к их родительскому контейнеру, поэтому во вложенных списках размер шрифта уменьшается. Может быть трудно определить размеры шрифта на сложных страницах — большинство из нас использует силу (много проб и ошибок) .
rem похож на em за исключением того, что он относится к корневому элементу, а не к родительскому элементу. Изменение селектора li на 0.75rem обеспечит 0.75rem всех вложенных списков на 12px.
rem доступен в Chrome, Firefox, Safari, Opera и IE9 +. Старые браузеры могут поддерживаться с запасным вариантом, и вам, вероятно, будет проще использовать абсолютные единицы, например
p, li { font-size: 12px; font-size: 0.75rem; }
VW, VH и Vmin
Эти новые свойства позволяют масштабировать размеры шрифта в соответствии с размерами области просмотра, т.е.
- 1vw составляет 1% от ширины области просмотра
- 1vh составляет 1% от высоты окна просмотра
- 1vmin является самым маленьким из 1vw и 1vh
Например, предположим, что область просмотра вашего браузера установлена на 1000 x 1200 пикселей:
- 1.5vw = размер шрифта 15px
- 1.5vh = размер шрифта 18px
- 1.5vmin = min (1.5vw, 1.5vh) = размер шрифта 15px
Новые устройства революционизируют адаптивный дизайн — текст на мобильных устройствах часто кажется немного большим, потому что вы держите устройство ближе, чем монитор.
Поддержка браузера немного нестабильна, но она идет…
- IE10 — полная поддержка
- IE9 — поддерживается, но vmin называется «vm»
- Chrome 22+ — полная поддержка
- Safari 6 и iOS Safari 6 — полная поддержка
- Firefox — будет реализован в версии 19 (конец февраля 2013 г.)
- Blackberry Browser 10 — полная поддержка
Оперы пока нет ни слова, но я подозреваю, что они по делу. Опять же, может быть целесообразно использовать запасные варианты в течение нескольких лет, например
p, li { font-size: 12px; /* old */ font-size: 1.2vm; /* IE9 */ font-size: 1.2vmin; }
Будете ли вы использовать какие-либо из этих новых модулей для определения размера шрифта на своих страницах?
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?