Размеры и rem

Rem

Webflow использует единицы px по умолчанию. Если мы введем "10" в любое поле ввода на панели Designer и нажмем "Enter", то мы установим значение "10px".

Client-First использует rem, который можно выбрать в выпадающем списке единиц измерения.

Что такое rem?

Rem означает "корневой em".

• Rem - это относительная единица измерения, основанная на font-size корневого элемента.
• Корневой элемент - это html.
• Rem связан с размером шрифта html.
• Большинство размеров, применяемых в Client-First, указаны в rem.

Наследование размера шрифта браузера

В Client-First мы наследуем html font-size от браузера.

Браузеры по умолчанию используют 16px в качестве стандартного значения html font-size.

Преобразование 1rem = 16px является стандартом браузера.

На основе утвержденных размеров Client-First мы можем быстро конвертировать значения px в rem. Например, рекомендуемые значения rem в Client-First составляют 0.5, 1, 1.5, 2, 2.5, 3 и т. д.

Rem и Client-First являются эффективной комбинацией для соблюдения лучших практик веб-доступности в контексте размера шрифта браузера.

Математика

Каждые 16px равны 1rem, когда значение font-size браузера установлено "по умолчанию" в настройках браузера.

При создании проекта в Webflow мы всегда используем 16px в качестве базового значения для расчета rem.

Каждое преобразование в единицах измерения rem является кратным числу 16.

Чтобы преобразовать значение px в rem, разделите это значение на 16.

Чтобы преобразовать значение rem в px, умножьте это значение на 16.

Для удобства мы предлагаем использовать легко читаемые значения rem, такие как 1, 2, 2.5, 3, 4, 5.

Мы рекомендуем избегать использования длинных числовых значений, например, 8.4375rem. Такие значения труднее запоминать и они замедляют рабочий процесс.

Вычисления в Webflow Designer

Мы можем вычислять rem непосредственно в большинстве полей ввода Webflow Designer.

В поле ввода ширины Designer введите "100/16rem", нажмите "Enter" и увидите рассчитанное значение rem.

Мы можем разделить любое число на 16, чтобы получить его значение rem внутри Webflow Designer.

Преимущества для веб-доступности

Вычисления в Webflow Designer

Браузеры используют 16px в качестве размера шрифта html по умолчанию. Однако, браузеры позволяют пользователю изменить размер шрифта, используемого по умолчанию.

Настройки размера шрифта браузера - важная часть обеспечения веб-доступности. Когда пользователи обновляют размер шрифта в своем браузере, контент сайта должен адаптироваться к этому изменению. Система rem Client-First адаптируется к настройкам размера шрифта браузера пользователя.

Когда мы работаем в других единицах измерения, таких как px или vw, мы игнорируем предпочтения пользователей, изменивших настройки размера шрифта браузера.

Масштабирование браузера

Rem также учитывает масштабирование браузера пользователя. Когда пользователь увеличивает или уменьшает масштаб страницы, наш сайт и контент в rem также будут масштабироваться.

При использовании единиц vw или vh масштабирование браузера не будет на них влиять.

vw зависит от ширины области просмотра браузера (или высоты в случае vh). Только изменение размера окна браузера повлияет на размеры, заданные в этих единицах.

Узнайте больше о доступности с использованием rem в нашей статье сравнения Wizardry vs. Client-First. Это технический обзор преимуществ использования rem.

Рекомендуемые значения px в rem

Настройка размера шрифта браузера

Ниже приведен список всех рекомендуемых значений rem с соответствующими им значениями в px.

Эти значения Client-First являются рекомендациями, а не строгими требованиями.

Client-First предлагает работать с этими значениями.

Есть 3 исключения при использовании приведенных выше значений.

1. Типографика

Использование 14px для размера шрифта является нормальным и его рекомендуется применять, когда 16px слишком велико. Размер шрифта 12px часто слишком мал для типографики.

2. Отступ 2px

Если требуется значение отступа меньше 4px, используйте 2px. Используйте значение 2px для очень маленьких отступов.

3. 1px равно 1px

При необходимости установить 1px, например, в CSS border, используйте значение 1px.

Мы не рекомендуем конвертировать значения 1px в rem.

Устройства с Retina имеют другие правила масштабирования, чем устройства без Retina. Использование 1px создаст точно 1px линию на любом устройстве без вмешательства масштабирования Retina.

Инструмент миграции px в rem в расширении Finsweet

Расширение Finsweet предлагает инструмент для преобразования в rem проектов, созданных в px.

Этот инструмент преобразует каждое значение в проекте из px в его вычисленное значение rem.

Вы можете найти этот инструмент во вкладке Client-First расширения Finsweet, функция "PX to REM Migrator".