Как использовать rem более удачно — не говорите, что понимаете относительные единицы CSS

внешний интерфейс дизайн CSS Perfect
Как использовать rem более удачно — не говорите, что понимаете относительные единицы CSS

Некоторое время назад я пытался перевести хорошую книгу Кита Дж. Гранта по CSS "CSS in Depth", вторая глава которой《Работа с относительными единицами》можно сказать, что объяснение и примеры относительных единиц в книге довольно исчерпывающие. После прочтения я обнаружил, что мало что знаю об относительных единицах CSS, и я надеюсь поделиться ею с вами, поэтому у меня есть это серия переводов. (Если есть опечатки или предложения по переводу, добро пожаловатьGithub PR ^_^)

Переводы серии «Не говори, что знаешь относительные единицы CSS»:

  1. Как использовать их более счастливо
  2. Как использовать rem более счастливо[Эта статья]
  3. Применение единиц измерения, зависящих от видового экрана
  4. Безразмерные числа и высота строки
  5. Пользовательские свойства CSS

Оглавление главы, соответствующее этой статье:

  • 2,2 эм и бэр
    • 2.2.2 Использование rem для размера шрифта
      • Удобство использования: используйте относительные единицы длины для размера шрифта.
  • 2.3 Перестаньте мыслить пикселями
    • 2.3.1 Установите разумный размер шрифта по умолчанию
    • 2.3.3 Сделать эту панель «отзывчивой»
    • 2.3.3 Изменение размера отдельного компонента

2,2 эм и бэр

2.2.2 Использование rem для размера шрифта

Когда браузер анализирует документ HTML, он создает коллекцию элементов, представляющих страницу, которая называется DOM (объектная модель документа). Древовидная структура, каждый узел представляет собой элемент.<html>является узлом верхнего уровня (корневым узлом), а под ним находятся его дочерние узлы<head>и<body>, а ниже — их дети, потомки и так далее.

Корневой узел является предком всех других элементов в документе. Он имеет специальный селектор псевдокласса (:root), который может быть представлен этим селектором в таблицах стилей. Используйте селектор типа html с именем класса или используйте селектор тегов напрямую, эффект тот же.

rem — это сокращение от root em (корень em). rem связан с корневым элементом и не зависит от текущего элемента. Независимо от того, где вы используете эту единицу в документе, 1,2rem вычисляется равным, равным 1,2-кратному размеру шрифта корневого элемента. В следующем примере кода размер шрифта корневого элемента объявляется, а размер шрифта объявляется с помощью rem во вложенном неупорядоченном списке.

[ Фрагмент 2.10 Объявление размера шрифта с помощью rem ]

:root {                    1
  font-size: 1em;          2
}

ul {
  font-size: .8rem;
}
  • 1 псевдокласс :root эквивалентен селектору html
  • 2 Используйте размер шрифта браузера по умолчанию (16 пикселей)

В этом примере размер корневого шрифта — это размер браузера по умолчанию, равный 16px (1em корневого элемента равен размеру шрифта браузера по умолчанию). Размер шрифта неупорядоченного списка составляет 0,8 rem, что соответствует 12,8 пикселям. Поскольку это относится только к корневому элементу, размер шрифта вложенных подсписков остается неизменным, даже если вы вкладываете списки в списки.

Удобство использования: используйте относительные единицы длины для размера шрифта.

Некоторые браузеры предоставляют пользователям 2 способа настройки размера текста: масштабирование и установка размера шрифта по умолчанию. Нажав Ctrl+ или Ctrl-, пользователь может масштабировать страницу. Это визуально увеличивает или уменьшает текст или изображение (фактически все элементы) всей страницы. В некоторых браузерах это изменение носит временный характер только для текущей вкладки и не влияет на вновь открытые вкладки.

Установите размер шрифта по умолчанию, он будет немного другим. Мало того, что запись настройки трудно найти (обычно на странице настроек браузера), но эта настройка является постоянной, пока пользователь не восстановит значение по умолчанию. Стоит отметить, что этот параметр не влияет на размеры шрифта, указанные в пикселях или других абсолютных единицах измерения. Поскольку размер шрифта по умолчанию необходим для некоторых пользователей, особенно для слабовидящих, размер шрифта следует указывать в относительных единицах или процентах.

rem упрощает большую часть сложности, привносимой em. На самом деле, rem представляет собой относительный компромисс между px и em и проще в использовании. Итак, означает ли это, что вы должны использовать rem для всех элементов, опуская другие единицы измерения длины? конечно, нет.

В мире CSS ответ обычно таков: это зависит от обстоятельств. rem — это всего лишь один из тех инструментов в вашем наборе инструментов. Важной частью освоения CSS является знание того, какие инструменты использовать в каких ситуациях. Мой выбор, даfont-sizeИспользуйте rem, px для границы и другие показатели, такие какpadding,margin,border-radiusи т. д. использовать em. Однако я предпочитаю использовать проценты, когда необходимо объявить ширину контейнера.

Таким образом, размер шрифта становится предсказуемым, и когда на размер шрифта элемента влияют другие факторы, вы также можете использовать em для масштабирования отступов и полей элемента. Использование пикселей на границах — это нормально, особенно если вы хотите получить красивую линию. Вышеизложенное является моим идеальным решением для использования разных единиц измерения для разных свойств, но я хочу еще раз заявить, что это инструменты, и в некоторых конкретных сценариях использование разных инструментов может дать лучшие результаты.

намекать

Когда вы не уверены, даfont-sizeиспользовать рем, даborderИспользуйте px и em для большинства других свойств.

2.3 Перестаньте мыслить пикселями

Определение размера шрифта корневого элемента страницы равным 0,625 em или 62,5% было обычным явлением в последние годы, и это шаблон или, точнее, антишаблон.

[ Фрагмент 2.11 Анти-шаблон: глобально определить размер шрифта до 10 пикселей ]

html {
  font-size: .625em;
}

Я не рекомендую это использование. Это использование уменьшает размер шрифта браузера по умолчанию с 16 до 10 пикселей. Преимущество этого в том, что это упрощает расчет, если дизайнер говорит вам, что размер шрифта должен быть 14px, то вы можете легко вычислить 1,4rem, ведь мы все еще используем относительные единицы.

На первый взгляд это кажется удобным, но на самом деле в этой реализации есть две проблемы. Во-первых, это заставляет вас писать много повторяющегося кода стиля. 10 пикселей слишком мало для большей части текста, и вам нужно покрывать его по всей странице. Вы обнаружите, что ставите абзац (<p>) объявляет размер шрифта 1.4rem, а затем ставит навигацию (<nav>) объявлен как 1.4rem для размера ссылки, и в коде стиля есть еще много таких применений. Это приводит к более высокому риску ошибок, когда вам нужно изменить код и обнаруживается, что код более связан, а также увеличивает размер файла стиля.

Вторая проблема заключается в том, что когда вы делаете это, вы на самом деле все еще думаете о пикселях. Хотя код написан как1.4rem, но в уме ты все еще думаешь14px. В адаптивной веб-разработке вы должны научиться жить с этими «нечеткими» значениями. Неважно, скольким пикселям на самом деле соответствует 1.2em, вам просто нужно знать, что это немного больше, чем унаследованный размер шрифта, и этого достаточно. И, если это не то, что вы хотите видеть на экране, измените это. Требуется время на эксперименты и пробы и ошибки, но по сути нам нужно делать то же самое при использовании px. (В главе 13 у нас будут более конкретные способы оптимизации этой реализации.)

При использовании em легко запутаться, во что это значение будет преобразовано в значение пикселя? Особенно размер шрифта. Вы все время умножаете и делите на значения em, поэтому довольно быстро сходите с ума. Вместо этого я надеюсь, что вы сможете принять вызов и попытаться выработать привычку начинать с них в первую очередь. Преобразование в em требует времени и практики, если вы привыкли работать с пикселями, но поверьте мне, оно того стоит.

Это не значит, что вы больше никогда не будете использовать пиксели. Если вы работаете с дизайнером, вам может потребоваться сообщить более точные значения пикселей, и это нормально. В начале проекта вам необходимо объявить базовый размер шрифта (обычно это обычный размер шрифта для заголовков или меток). Часто проще описать размер, используя абсолютные значения.

Преобразование в рем будет иметь расчетную часть, поэтому пусть калькулятор сделает всю работу (обычно я нажимаюcmd+空格, рассчитанный в Spotlight). Сначала объявите размер корневого шрифта для корневого элемента, и оттуда использование пикселей должно быть исключением, а не нормой.

В этой главе я продолжу говорить о пикселях. Это поможет мне объяснить, как работают относительные единицы, а также поможет вам привыкнуть к расчету значений em. Далее в этой главе я в основном буду использовать относительные единицы для обсуждения размера шрифта.

2.3.1 Установите разумный размер шрифта по умолчанию

Допустим, вы хотите установить размер шрифта по умолчанию на 14px. Установите 10 пикселей в качестве базового значения, а затем переопределите его запись на странице. Мы не рекомендуем такую ​​запись. Вместо этого вы должны объявить значение непосредственно в корневом элементе. В этом фрагменте кода наследуется целевое значение размера шрифта, значение браузера по умолчанию — 16 пикселей, поэтому 14/16 = 0,875.

Добавьте следующий код в начало новой таблицы стилей, куда мы добавим другой код. Здесь задается корневой элемент (<html>) размер шрифта по умолчанию.

[Фрагмент 2.12. Установка правильного размера шрифта по умолчанию]

:root {                    1
  font-size: 0.875em;      2
}
  • 1 или используйте селекторы HTML
  • 2 14/16 (ожидаемое значение пикселей / унаследованное значение пикселей) равно 0,875

Теперь желаемый базовый размер шрифта 14 пикселей действителен для всего элемента страницы, и вам не нужно повторно объявлять его где-либо еще. Вам нужно изменить новый размер шрифта только там, где дизайн отличается, например, в заголовке.

Давайте создадим панель, как на рис. 2.7! Созданная вами панель, основанная на размере шрифта 14 пикселей, использует относительные единицы.

[Рис. 2.7 Панель с использованием относительных единиц измерения и унаследованного размера шрифта]

Ниже находится шаблон, добавьте его на свою страницу.

[ Фрагмент 2.13 Шаблоны панелей ]

<div class="panel">
  <h2>Single-origin</h2>
  <div class="panel-body">
    We have built partnerships with small farms around the world to
    hand-select beans at the peak of season. We then carefully roast
    in <a href="/batch-size">small batches</a> to maximize their
    potential.
  </div>
</div>

Следующий фрагмент кода — это стиль. ты будешьpaddingиborder-radiusиспользоватьem, используется размер шрифта заголовкаrem,а такжеborderиспользоватьpx. Добавьте следующий код в таблицу стилей.

[ Фрагмент 2.14 Панель с относительными единицами измерения ]

.panel {
  padding: 1em;                    1
  border-radius: 0.5em;            1
  border: 1px solid #999;          2
}

.panel > h2 {
  margin-top: 0;                   3
  font-size: 0.8rem;               4
  font-weight: bold;               4
  text-transform: uppercase;       4
}
  • 1 Используйте em для заполнения и радиуса границы
  • 2 Определите тонкую границу с 1px
  • 3 Удалите дополнительное пространство над панелью, дополнительные пояснения см. в Главе 3.
  • 4 Используйте rem для управления размером шрифта заголовка

Этот код добавляет к панели тонкую рамку и определяет стиль заголовка. Я хочу, чтобы заголовок был меньше, но жирнее и все заглавные. (Вы можете изменить размер шрифта или использовать другой метод набора в соответствии с вашим собственным дизайном)

второй селектор>является комбинатором прямого потомка, который представляет.panelдочерний элемент подh2. См. Приложение A для более полного указателя селекторов и комбинированных селекторов.

В фрагменте кода 2.13, чтобы более наглядно увидеть эффект, я даюbodyдобавил классpanel-body, но вы обнаружите, что в вашем собственном коде он не нужен. Поскольку этот элемент наследует размер шрифта от корневого элемента, это уже то, что вы хотите видеть.

2.3.3 Сделать эту панель «отзывчивой»

Давайте подробнее рассмотрим этот вопрос. Вы можете добавить медиа-запросы, чтобы изменить базовый размер шрифта в соответствии с изменением размера экрана, что может привести к изменению размера панели при разных размерах экрана. (См. рис. 2.8)

[Рисунок 2.8. Адаптивные панели на разных размерах экрана: 300 пикселей (вверху слева), 800 пикселей (вверху справа), 1440 пикселей (внизу)]

медиазапрос - через@mediaПравила для объявления стилей, которые запускают соответствующие элементы управления стилем при различных размерах экрана или типах носителей (например, принтеры или мониторы). Это ключевой элемент адаптивного дизайна. Подробности смотрите в примере во фрагменте кода 2.15, а я более подробно рассмотрю тему медиа-запросов в главе 8.

Чтобы добиться упомянутого выше эффекта, измените код стиля на этот.

[Фрагмент кода 2.15]

:root {                            1
  font-size: 0.75em;               1
}                                  1

@media (min-width: 800px) {        2
  :root {                          2
    font-size: 0.875em;            2
  }                                2
}                                  2

@media (min-width: 1200px) {       3
  :root {                          3
    font-size: 1em;                3
  }                                3
}
  • 1 для всех экранов, но будет перезаписан на больших экранах
  • 2 Переопределите код стиля по умолчанию для экранов шириной более 800 пикселей.
  • 3 Для экранов шире 1200 пикселей переопределите два приведенных выше набора кодов стилей.

Первый набор правил стиля объявляет размер шрифта по умолчанию на маленьких экранах, что мы и хотим видеть на маленьких экранах. Затем используйте медиа-запрос, чтобы шаг за шагом увеличивать размер шрифта, используя 800px и 1200px в качестве двух водоразделов соответственно, перезаписывая код по умолчанию.

Используйте эти размеры шрифта для корневого элемента страницы, чтобы оперативно переопределить значения, соответствующие em и rem, чтобы добиться эффекта изменения всей страницы в ответ. Хотя вы не вносили никаких изменений непосредственно в эту панель, теперь она адаптивна. На маленьком экране, таком как мобильный телефон, размер шрифта будет меньше (12 пикселей). Затем на больших экранах с шириной больше 800 пикселей и больше 1200 пикселей размер шрифта компонентов будет увеличен до 14 пикселей и 16 пикселей соответственно. Измените окно браузера и посмотрите, как изменится компонент.

Если вы строго используете относительные единицы, подобные этой, на всей странице, вся страница будет увеличиваться и уменьшаться в зависимости от размера области просмотра. Это будет важной частью вашей стратегии реагирования. Приведенные выше два набора кодов объявлений медиазапросов помогут вам сэкономить дополнительный код для использования медиазапросов в других частях страницы. Однако, если вы объявите размер шрифта в элементе в пикселях, это не будет иметь никакого эффекта.

Точно так же, если ваш начальник или клиент считает, что размер шрифта текущего веб-сайта слишком мал или слишком велик, вы всегда можете сделать это, изменив строку кода, чтобы повлиять на глобальный элемент, и это изменение повлияет на другие элементы на странице без много усилий.

2.3.3 Изменение размера отдельного компонента

Вы также можете масштабировать отдельный компонент на странице с помощью em. Иногда вам может понадобиться увеличить версию некоторых компонентов интерфейса. Сделайте это на нашей панели, сначала вам нужно добавить имя класса на панельlarge:<div class="panel large">.

На рисунке 2.9 мы видим сравнение обычного и большого вариантов панелей. Эффект аналогичен адаптивной панели, но оба размера можно использовать на одной странице одновременно.

[Рисунок 2.9 Панель обычного размера и панель большого размера на одной странице]

Давайте внесем небольшие изменения в то, как объявляется размер шрифта панели. Вы по-прежнему используете относительные единицы, но вам нужно настроить их базовое значение. Первый момент — определить размер шрифта родительского элемента каждой панели.font-size: 1rem. Это относится к использованию этой панели независимо от того, где вы находитесь, размер шрифта каждой панели является определенным значением.

Во-вторых, используйте em еще раз, чтобы объявить размер шрифта заголовка без использования rem, чтобы заголовок мог ассоциироваться с только что объявленным размером шрифта родительских элементов. Вот соответствующий код, обновите свою таблицу стилей под кодом.

[ Фрагмент 2.16 Создает большую версию панели ]

.panel {
  font-size: 1rem;               1
  padding: 1em;
  border: 1px solid #999;
  border-radius: 0.5em;
}

.panel > h2 {
  margin-top: 0;
  font-size: 0.8em;              2
  font-weight: bold;
  text-transform: uppercase;
}
  • 1 Укажите размер шрифта для объявления компонента
  • 2 Размер шрифта других элементов связан с размером шрифта родительского элемента с помощью em

Эти изменения не повлияют на стиль панели, но теперь вы готовы создать большую панель с помощью всего лишь небольшой строки кода. Все, что вам нужно сделать, это переписать размер шрифта родительского элемента на значение, отличное от 1rem. Поскольку расчет других элементов зависит от размера шрифта родительского элемента, при его изменении относительный размер всей панели будет меняться. Добавьте следующий фрагмент CSS в свою таблицу стилей, чтобы определить большую панель.

[ Фрагмент 2.17 Увеличивает всю панель одной строкой кода ]

.panel.large {               1
  font-size: 1.2rem;
}
  • 1 Комбинированный селектор указывает на элементы как с панельными, так и с большими классами

Теперь вы можете добавить на обычную панельclass="panel"и добавить на большую панельclass="panel large". Точно так же вы можете определить маленькую версию, просто установите размер шрифта родительского элемента меньше 1rem. Если панель представляет собой более сложный компонент с несколькими размерами шрифта или отступами, для сброса размера требуется только одно объявление, если все дочерние элементы объявлены с помощью em.

Переводы серии «Не говори, что знаешь относительные единицы CSS»:

  1. Как использовать их более счастливо
  2. Как использовать rem более счастливо[Эта статья]
  3. Применение единиц измерения, зависящих от видового экрана
  4. Безразмерные числа и высота строки
  5. Пользовательские свойства CSS

глава:

  • 2.1 Магия относительных значений единиц
    • 2.1.1 Борьба за идеальный до пикселя дизайн
    • 2.1.2 Конец идеальных до пикселя веб-страниц
    • Пиксель, точка и ПК (пика)
  • 2,2 эм и бэр
    • 2.2.1 Использование em для размера шрифта
      • Когда мы объявляем размер шрифта и другие свойства вместе с em в элементе
      • проблема уменьшения размера шрифта
    • 2.2.2 Использование rem для размера шрифта
      • Удобство использования: используйте относительные единицы длины для размера шрифта.
  • 2.3 Перестаньте мыслить пикселями
    • 2.3.1 Установите разумный размер шрифта по умолчанию
    • 2.3.2 Сделать эту панель «отзывчивой»
    • 2.3.3 Изменение размера отдельного компонента
  • 2.4 Единицы относительно области просмотра
    • CSS3
    • 2.4.1 Использование vw для размера шрифта
    • 2.4.2 Использование calc() для размера шрифта
  • 2.5 Безразмерное число и высота строки
  • 2.6 Пользовательские свойства (также известные как «CSS-переменные»)
    • 2.6.1 Динамическое изменение значения пользовательских свойств
    • 2.6.2 Изменение значения пользовательского свойства с помощью JavaScript
    • 2.6.3 Предварительное изучение пользовательских свойств
  • Суммировать

Исходная информация об авторских правах:

Автор: Кит Дж. Грант
Книга: CSS в деталях
глава:Working with relative units

Автор @Yuying Wu, фронтенд-энтузиаст / вдохновитель / рабочий отпуск в Новой Зеландии / лопатоукладчик. В настоящее время работает в команде фронтенда B2B крупной компании электронной коммерции.

Спасибо, что прочитали это, и если у вас есть какие-либо вопросы или предложения по вышеизложенному, пожалуйста, оставьте сообщение.

Если вам нравится интерфейс так же, как и мне, вам нравится возиться с независимыми блогами или передовыми технологиями или у вас есть какие-либо вопросы о карьере, добро пожаловать на меня и общайтесь со мной.

Независимый блог:wuyuying.com
Узнать идентификатор:@Yuying Wu
Гитхаб:Yuying Wu

Категории