Использование единиц измерения rem
17 февраля 2018 | Опубликовано в css | Нет комментариев »
Веб-разработчики, идущие в ногу со временем, уже перешли от традиционной абсолютной системы создания веб-страниц, использовавшей пиксели и поинты, к современной адаптивной, использующей единицы измерения em и проценты. Использование относительных единиц измерения позволяет создать цельную веб-страницу, в которой все взаимосвязано, а также хорошо масштабируется, что делает веб-страницу по-настоящему адаптивной.
Проблемы единиц измерения em
Единица измерения em полностью независимая: это буквально размер текущего выбранного текста. Самая большая проблема с этой единицей измерения, которой никак не избежать, - увеличение в размере вложенных элементов. Например, применяя следующий код CSS:
p, ul, li { font-size: 1.4em; }
Вы, возможно, ожидаете, что шрифт в абзацах будет того же размера, что и у элементов пунктов списка, не зависимо от контекста, в котором они находятся, но если код CSS выше применяется к следующей разметке:
<p>Lorem ipsum… <ul> <li>Dolor sit… <li><p>Callum est… </ul>
То размер текста в элементах пунктов списка будет больше, чем в абзацах. Единицы измерения em перемножают размер шрифта, когда один элемент находится внутри другого. В ситуации, приведенной выше, элементы пунктов списка наследуют значение em от элемента списка, в котором они находятся.
Как Вы понимаете, задавать исключения из общего правила, устанавливая размеры отдельным элементам и их сочетаниям в коде CSS, чтобы решить эту проблему, очень сложно.
Решение проблемы с помощью единиц измерения rem
Решение вышеописанной проблемы просто: используйте единицу измерения rem. Она всегда связана с размером корневого элемента, т. е., тега html, и не увеличивается для вложенных элементов, так что с ее помощью легко создать крепкую и предсказуемую типографическую структуру. Иногда, чтобы сделать все еще проще, единица измерения rem используется вместе со следующей записью:
html { font-size: 62.5%; } p, li { font-size: 1.6rem; }
Задание размера тегу html делает 1rem близким по размеру к 10px, что позволяет веб-дизайнеру легко переключаться между знакомыми значениями.
Если Вам нужна поддержка единицы измерения rem в очень старых версиях браузеров, таких как Internet Explorer версии 8 и более ранних, то можно воспользоваться небольшим скриптом, написанным Chuck Carpenter, который пересчитывает rem в коде CSS в пиксели для браузеров, которые не поддерживают эту единицу измерения.
Дополнительная информация: на сайте CSS Tricks есть отличная статья, написанная Roman Rudenko, об использовании единиц измерения rem не только для задания размера шрифта. Хотя можно поспорить с некоторыми выводами, но Jeremy Church сделал очень хорошее сравнение единиц измерения rem и em.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191