Как перевести пиксели в rem
Обновлено: 06.07.2024
В этой статье вы узнаете про выставление размера шрифта в пикселях, em, rem, процентах и viewport единицах.
Очень много обсуждений велось по поводу пикселей, em , процентов, rem и какое свойство шрифтов когда использовать. Не смотря на более сотни статей в сети, эта тема может быть довольно запутанной, учитывая то, как использование этих свойств шрифтов разнится в зависимости от нужд наших проектов. Для примера, некоторые советуют не использовать фиксированные пиксели на базовом уровне (html и body элементы), так как пользователь не будет иметь возможности сбросить размер шрифтов под свои параметры. Но для людей типа меня, которые зависимы от bootstrap, это не совсем благоразумно. Мы заканчиваем с фиксированными основными значениями в пикселях и начинаем создавать свойства шрифтов для всего проекта, отталкиваясь от основных пиксельных значений.
Эта статья объясняет разницу между свойствами шрифтов и как лучше их использовать. Естественно нет конкретного пути того, как это делать и большая часть того какой шрифт использовать и насколько будет определяющим этот момент, основываясь на понимании единиц размерности шрифтов и тип проекта — всё это определяющие моменты, от которых зависит выборка в вариативности инструментов.
Пиксели
Перед наступлением эпохи адаптивного дизайна, пиксели широко использовались как единица размерности шрифтов для всего от типографики до ширины, отступов и высоты. Тем не менее, пиксели это единицы с фиксированным размером и они не меняются, основываясь на размере viewport или масштабности. Если вы хотите сделать адаптивный сайт, используя пиксели, то это может стать довольно сложным занятием, так как вам придется отслеживать все значения основанные на пикселях в CSS, включая значения в медиа запросах. Так какое же свойство шрифта мы можем использовать, чтобы делать минимальные изменения в нашем CSS, но оставаться масштабируемыми? И тут нам на помощь приходят em, rem, проценты и единицы viewport.
Em
Em — гибкая масштабируемая единица, которая конвертируется браузером в пиксели. Если стандартный размер шрифта в Chrome равен 16px, то 1 em = 16px . Главное заблуждение по поводу em в том, что оно зависит от размера шрифта родительского элемента. Следуя спецификации W3, em относителен размеру шрифта элемента на котором их используют. Em широко используются для типографии, такой как заголовки, текста, параграфы и с элементами ассоциированными с ней, такими как внешние отступы и внутренние. Если вы выставите базовый размер шрифта для для html и body элементов в пикселях и свойства ваших типографических элементов будут определяться в с помощью em, для адаптивного дизайна все что вам нужно будет сделать это изменить стандартный размер шрифта на базовом уровне, например.
и все em значения будут автоматически пересчитаны.
Тем не менее, у em есть большое предостережение! Наследование!
Для примера, <div> с размером шрифта в 16px содержит <p> размером шрифта в 2em , что пересчитывается как 32px для <p> . Теперь добавьте <div> в <p> с размером шрифта в 0.5em , как результат у дива будет размер 16px , как у половины от 32px , а не 8px . И тут нам на помощь приходят rem.
Rem
rem относителен размеру шрифта корневого элемента( html элемент). Если размер шрифта html элемента равен 16px , то 1rem = 16px . Rem будет ВСЕГДА относителен корневому элементу, не полагаясь на вложенные элементы. Тем не менее, использование исключительно rem без em может вызвать своеобразные проблемы в плане типографики, так как она может стать слишком большой или маленькой, что приведет к проблемам в масштабируемости.
Проценты
Значения в процента всегда относительны от другого значения, будь это родительское значение элемента или другое свойство элемента. Проценты широко используются в адаптивном дизайне. Отличный тому пример Bootstrap. Двенадцати колоночный макет бутстрапа имеет значения ширины выставленные в процентах, таким образом они всегда гибкие и подстраиваются относительно родительского элемента.
Проценты широко используются для выставления ширины и высоты контейнеров, дивов и для адаптивной графики.
Единицы viewport
Ширина и высота viewport свойств относительна ширине/высоте заданного размера viewport.
1vw = 1% ширины viewport
1vh = 1% высоты viewport
Viewport в данному случае означает размер окна браузера. Если вы хотите выставить размер элемента, основываясь на ширине viewport, а не на родительском/корневом элементе, то viewport единицы это то, что вам нужно. vw / vh единицы отлично работают с типографикой и широко используются там же.
Финальный вердикт
С тех пор как я часто начал использовать Bootstrap, мой стандартный размер базового шрифта стал в пикселях. Я использую проценты, чтобы выставить ширину и высоту для изображений, контейнеров и дивов, а em и rem для типографики и элементов относящихся к типографике, таким как margin и padding и т. п. Сейчас я играюсь с единицами viewport для адаптивной типографики и нахожу это очень крутым. Экспериментируйте с этими свойствами как можно больше и вы вскоре найдете стиль подогнанный именно для вас.
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
- Главное достоинство пикселя – чёткость и понятность
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.
Вот, если интересно, их значения:
- 1mm (мм) = 3.8px
- 1cm (см) = 38px
- 1pt (типографский пункт) = 4/3 px
- 1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
Почему в сантиметре cm содержится ровно 38 пикселей?В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в <div> одинаков.
А вот аналогичный пример с em вместо px :
Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
В спецификации указаны также единицы ex и ch, которые означают размер символа "x" и размер символа "0" .
Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква "x" и ноль "0" . В этом случае они носят более условный характер.
Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.
Проценты %
Проценты % , как и em – относительные единицы.
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
Это очень важная особенность процентов, про которую, увы, часто забывают.
Отличный источник информации по этой теме – стандарт, Visual formatting model details.
Вот пример с % , он выглядит в точности так же, как с em :
В примере выше процент берётся от размера шрифта родителя.
А вот примеры-исключения, в которых % берётся не так:
margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.
Единица rem: смесь px и em
Итак, мы рассмотрели:
- px – абсолютные, чёткие, понятные, не зависящие ни от чего.
- em – относительно размера шрифта.
- % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – em и % .
Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .
Не совсем так (если только вы не истолковали «идеальный до пикселя», как избегание полупикселей). Приступим:
Так в чем же проблема использования значений в пикселях?
99% практики, реальные задачи от крупных компаний страны и шанс попасть на работу мечты.Пиксель – это абсолютная единица измерения, то есть 1 пиксель соответствует фиксированному физическому размеру (в зависимости от разрешения экрана). Теперь фиксированное значение кажется мечтой дизайнера. Оно означает полный контроль, поскольку мы проектируем 1x в Figma! Делаем так, чтобы все выглядело идеально! Однако использование px может создать серьезные препятствия для доступности (помимо других проблем). Например, переопределение настроек размера шрифта, установленных пользователями.
Font-Size Preference? Что это?
Каждый браузер имеет размер шрифта корневого элемента по умолчанию. Это означает, что текст без стиля будет отображаться с определенным размером, обычно 16px. Пользователи могут изменить размер шрифта корневого элемента в настройках браузера. Попробуйте сами Chrome → More Menu (три маленькие точки в верхнем правом углу) > Settings > Appearance > Custom fonts. Особенно это пригодится пользователям с нарушением зрения!
Попробуйте в своем браузере!
Не только пользователи могут изменить это предпочтение. Разработчики также могут изменить размер шрифта корневого элемента с помощью CSS, используя тег html.
👆 Кстати: пользователи могут увеличить настройки масштабирования браузера вместо изменения размера шрифта корневого элемента. Это не вызовет проблем с px. Соответственно все будет масштабироваться. Однако точно так же, как мы не знаем, какой размер экрана будут использовать пользователи, мы не в курсе предустановленных ими вариантов, к тому же существуют четкие правила добавления масштабирования шрифтов от WCAG.
PX перезапишет пользовательские настройки
Позвольте мне показать пример. Итак, вы определили все размеры шрифта в пикселях. Предположим, что ваш заголовок H1 – 48px, а текст p – 16px. Похоже на разумные читабельные значения.
Значения в пикселях будут препятствовать пользовательским настройкам размера шрифта в браузере
Однако, поскольку значения в пикселях фиксированные, они перезаписывают любые настройки браузера. Это, как если бы они урезали все до размера шрифта корневого элемента. Даже если пользователь изменит размер корневого элемента, в нашем примере с 16px на 24px, это не повлияет на отображаемый размер. Таким образом, вы создали барьер для юзабилити.
Что изменится, если я буду использовать REM единицы измерения?
rem – относительная единица, относящаяся к размерам шрифта корневого элемента (r в rem означает корень – англ. root). Таким образом, большую часть времени 1rem = 16px, однако, если размер шрифта корневого элемента был изменен (помните, что это могли сделать пользователи или разработчик), например, на 24px, тогда 1rem = 24px.
1rem = текущая настройка размера шрифта корневого элемента
Итак, чтобы преобразовать заголовок H1 из 48px в rem, мы делим 48px/16px (мы предполагаем, что размер корневого элемента по умолчанию) = 3rem. Если вам так проще, просто представьте это в виде %. 1 rem – это 100%, а 3 rem – это 300%.
REM не переводится в пиксели как таковые, но вы можете рассчитать значение пикселей на основе размера шрифта корневого элемента. Весь смысл его использования в том, что значение не является фиксированным.
Итак, чтобы ответить на наш первоначальный вопрос: «Что изменится в нашем дизайне при использовании rem вместо px». Ответ: для всех пользователей, не меняющих размер шрифта корневого элемента (а это, без сомнения, подавляющее большинство), абсолютно ничего не изменится, и ваш дизайн выглядит так же, как с px. Для меньшинства, которое полагается на изменение размера шрифта корневого элемента, весь текст (и в идеале все другие элементы, но об этом позже) будет масштабироваться пропорционально.
Прелесть в том, что, используя единицы rem для определения размера шрифта, вы как дизайнер сохраняете гармонию и иерархию шкалы шрифтов, но при этом предоставляете пользователям гибкость в адаптации размеров шрифта.
А что насчет EM?
И rem, и em относятся к размеру корневого элемента, но они не интерпретируют его одинаково во всем вашем дизайне.
rem → значение, кратное размеру шрифта корневого элемента вашего браузера, например, размер шрифта корневого элемента = 16px, тогда 1rem = 16px
em → значение, кратное размеру шрифта элемента, в котором оно используется, например, размер шрифта контейнера 2rem = 32px, таким образом, 1em = 32px внутри контейнера
Использование em-единиц учитывает настройки браузера пользователя, но относится к элементу, в котором они используются
Таким образом, он по-прежнему соблюдает настройки браузера, но всегда относится к следующему более высокому элементу, в некоторых случаях это может быть корневой элемент, но он также, как в нашем примере, может быть контейнером с установленным размером шрифта. Хорошо, я признаю, что в первый раз это сбивает с толку. Я приготовил для вас заметку на codepen.
👆 Примечание: вы много прочитаете, что они относятся к родительскому элементу. Да, em может наследовать настройки от родительского элемента, но по определению оно: «Равно вычисленному значению свойства шрифта элемента, в котором оно используется». Есть отличная статья, объясняющая это более подробно.
Так что это довольно увлекательный и динамичный способ настройки таких вещей, как внутренние отступы и поля. И rem, и em имеют свои сильные и слабые стороны в зависимости от варианта использования. Опытные фронтенд-разработчики прекрасно их объединяют. Однако, работая с Figma, вы можете заметить, что, хотя расчет rem прост, вычисление em становится довольно запутанным. Поэтому лично я, как дизайнер, придерживаюсь определения всех значений в rem и обязательно отмечаю, что команда разработчиков имеет полный контроль над конвертированием их в другие единицы, например, em, где это необходимо. О том, как и зачем я это делаю, я расскажу чуть позже.
Вкратце
Но в Figma нет REM-модулей?! Что мне делать?
Это то, о чем большинство веб-разработчиков не знают: ни в одной программе проектирования интерфейса даже в таких продвинутых, как Sketch и Figma, мы в настоящее время не можем проектировать в rem / em единицах.
Итак, UX / UI дизайнеры вынуждены проектировать в px, в мире, где доступность является юридическим требованием… Да, это странно, да, это печально, учитывая, насколько продвинута Figma в других областях, и да, я уверен, что это будет исправлено в ближайшее время (задача не из легких, если только не добавить в Figma режим проверки, как быстрое исправление). И да, да, я знаю, что в идеальном мире все дизайнеры должны быть идеальными программистами, есть много статей об этом, но это не тема моей статьи. А пока давайте посмотрим, какие есть варианты у дизайнеров, использующих Figma, чтобы начать работать в относительных единицах.
Решение 1: Дизайн остается в PX и преобразуется в относительные единицы во время кодинга. И вся команда знает об этом.
Это хорошо работает, если вы работаете в тесной команде и четко распределяете обязанности. Разработчики должны знать о проблеме «в Figma только px» и переводить в CSS все пиксели в относительные единицы.
px в Figma, rem/em (или любые другие подходящие единицы) в CSS
На самом деле это неплохое решение, потому что, если вы работаете с хорошей технической командой, они будут гораздо более осведомлены о последних технологиях и требованиях доступности, которые, как уже упоминалось, представляют собой гораздо больше, чем просто относительные единицы. Они также могут не возражать против получения значений в пикселях, поскольку есть несколько помощников, позволяющих избежать утомительных вычислений:
Метод 62,6%
При этом размер шрифта корневого элемента в CSS установлен на 62,5%. Таким образом, вы как бы подделываете размер корневого элемента в 10px, но продолжаете выдавать правильные значения. Нет, вы не трогаете реальный размер шрифта корневого элемента. Вы просто настраиваете его в своей разметке с помощью относительных измерений, и никто никогда ничего не узнает. Очень круто и хорошо объяснено в этой статье.
Sass Mixin
Сама Figma рекомендует этот Sass Mixin для простого преобразования px в rem. Вы также найдете там немного магии метода 62,6%, если немного проскроллите вниз.
Решение 2. Используйте инструмент передачи проекта разработчикам (например, Zeplin)
Прелесть Figma в том, что вам больше не нужен другой инструмент для передачи проекта разработчикам. Однако, если вы используете для передачи такой инструмент, как Zeplin, он предоставляет фантастический способ просто переключить единицы измерения на rem. Мне нравится, что есть отдельная таблица стилей для блоков интервалов, которая автоматически отображается в rem.
Все равно стоит указать команде, что исходные файлы Figma остаются в пикселях. Я немного расстроен, что не вижу такого конвертера rem в режиме проверки Figma, но, зная Figma, я уверен, что он вскоре появится.
Вы также можете использовать любой другой инструмент передачи проекта с этой опцией, например, Avocode, Anima и многие другие. Лично мне нравится Zeplin.
Решение 3. Определите значения PX и REM в таблицах стилей
Я предпочитаю именно это решение. В любом случае я добавляю эти значения в свои таблицы стилей, особенно когда работаю на фрилансе со сменяющимися разработчиками. UX в UX / UI дизайне исходит из юзабилити, поэтому я обязан убедиться, что проектирую для каждого пользователя.
Точно так же, как я использую «on color» в своей таблице стилей цветов, чтобы напоминать себе и всем остальным о необходимости проверять контрастность для доступности. Этот прием помогает напомнить всем, что конечный результат должен быть в относительных единицах.
Таблица стилей типографики
Поэтому, когда дело доходит до перехода от дизайна к разработке, я просто добавляю значения rem к значениям px в таблицу стилей типографики. Важно иметь оба значения, поскольку дизайнерам, работающим с файлом, понадобятся пиксели.
Таблица стилей типографики. Источник moonlearing.io
Кстати, в Figma фактические единицы пикселей безразмерны, я предполагаю, что это нужно, чтобы не путать пиксели, используемые для дизайна, и пиксели разрешения экрана (в Figma мы проектируем так называемое 1x, где 1px = 1pt, но это тема для отдельной статьи, следите за обновлениями и подписывайтесь на автора).
Не забудьте также перевести высоту строки в относительные единицы! В этом случае вам не нужно использовать rem, вы можете просто использовать безразмерное число, например, 1.5. Оно рассчитает высоту строки из заданного размера шрифта. Поэтому размер шрифта 16px и высота строки 1.5 приведут к 16px * 1.5 = высота строки 24px.
Вычисления в Figma
Если вы не знаете, то вы можете рассчитать что угодно прямо на панели свойств. Таким образом, вы можете просто разделить заданный размер шрифта на 16px и записать новое значение в таблицу стилей. Вам нужно снова умножить его на 16px, чтобы восстановить значение в пикселях. Для высоты строки, я просто использую %, так как для меня это намного проще, а затем перевожу их в таблице стилей, например, 150% в 1.5.
Используйте панель свойств как калькулятор
Используйте плагин Hand››over
Вы также можете использовать этот отличный плагин, который сделает всю работу за вас. В Figma просто выберите элемент, и он покажет вам значения в rem. Вы можете скачать его бесплатно в Figma Community. Оставьте размер корневого элемента 16px.
Плагин Hand >> over переведет для вас px в rem
Используйте онлайн-конвертер
Есть много конвертеров, например, nekoCalc. Вы также можете использовать определенное соотношение и попробовать что-то вроде этого. Подробнее об использовании шкал адаптивного типа читайте здесь.
Вычисление rem из предполагаемого базового размера 16px
Система интервалов и компоненты
Я использую систему интервалов 8pt для большинства своих проектов. Это означает, что все кратно 8 (обязательно подпишитесь на автора, статья об этом вскоре появится). Теперь это прекрасно работает с предполагаемым размером корневого элемента по умолчанию 1rem = 16px. Как вы могли заметить, я также делаю размер шрифта и высоту строки кратными 8 (иногда нужно выбирать значение кратное 4), поэтому я редко получаю сумасшедшие rem десятичные дроби.
Итак, как только моя система настроена, я просто применяю ее к своим компонентам.
Компонент с измерениями
Я добавляю rem только для того, чтобы напоминать себе и всем остальным использовать относительные единицы. Тем не менее, я добавляю примечание, в котором ясно указывается, что последнее слово в выборе компонентов и модулей остается за командой разработчиков. Иногда em могут быть более разумным решением.
Имейте в виду, что когда дело доходит до интервала, em иногда может быть гораздо лучшим решением, чем rem.
Тестирование и вычисление em в Figma было бы кошмаром, поэтому лучше доверить настройку реальных компонентов экспертам. Тем не менее, буду рад услышать другие решения!
👆 Несколько слов об именах интервальных блоков
Существует множество различных подходов, и некоторые дизайн-системы уже имеют заданную систему и именование интервалов.
Идеальное соглашение об именах – описательное, легкое для запоминания и… вот здесь появляется сложность… масштабируемое.
При настройке интервала я использую три группы S, L и M, где S – это мелкие элементы, например, внутри компонента, M – расстояния внутри групп и L – для разделения секций (грубо говоря). Внутри этих групп я добавляю размеры (всегда кратные 8) по мере необходимости, например. S-200 = 16px = 1rem. Сейчас я не использую 1, 2, 3 по той причине, что в будущем могу добавить или убрать размеры. Я не использую 10, 20, 30, так как их путают с пикселями, поэтому, как и с цветовыми вариантами, я использую шаг в 100 единиц, что дает мне большую гибкость. Однако, это не устоявшееся правило, а просто способ, который с течением времени мне показался наиболее удобным.
Не переживайте по поводу контура в 1px!
Это совершенно нормально! Нет проблем с наличием контура в 1px. Речь идет о том, чтобы сделать контент масштабируемым и пригодным к потреблению.
А как насчет точек останова?
Как UX / UI дизайнер, вы редко будете отвечать за выбор системы сеток (если только вы не используете настраиваемую CSS сетку, которая является моей любимой). Поэтому вам, скорее всего, будет предоставлен набор возможных точек останова для использования в вашем дизайне (всех или некоторых из них, зависит от вас).
Таблица стилей типографики с точками останова. Источник: moonlearing.io
Boostrap, например, сохраняет все точки останова в px, при этом определяя большинство других размеров в rem и em, «это потому, что ширина области просмотра в пикселях и не изменяется с размером шрифта». Другие, такие как Zurb foundation, используют em (обратите внимание, что здесь, похоже, em побеждает rem). Я решил, что буду указывать, как и в других моих таблицах стилей, px, а также em (не rem).
Точка останова и единицы измерения – непростая задача (по крайней мере, для меня, как дизайнера), поскольку есть еще кое-что, что нужно учитывать, например, браузеры, которые вы используете… и множество мнений вокруг. Если вы захотите подробнее узнать об этой теме, вот отличная статья.
Хорошо, я понял, но на самом деле изменение размера шрифта корневого элемента требует больших усилий для такого небольшого количества людей!
Верно (хотя это не займет так много времени, как только вы осознаете это). Так почему же UX / UI дизайнер должен беспокоиться об относительных единицах? Потому что вы хороший человек и не станете парковаться на стоянке для инвалидов просто потому, что так удобнее (по крайней мере, я надеюсь, что вы не станете). Если вам нужна другая причина, по закону вы обязаны сделать свой веб-сайт доступным, и одна небольшая часть этого требования (среди многих других, объясненных WCAG) позволяет пользователям масштабировать текст. В разделе 1.4.4 WCAG заявляет «1.4.4 Изменение размера текста: …размер текста можно изменять без вспомогательных технологий до 200 процентов без потери содержимого или функциональности. (Уровень AA)»
Итак, в двух словах: создание «идеального до пикселя дизайна» стало просто преступлением… и мне это никогда не нравилось.
Конвертация rem для адаптации интерфейсной страницы
Зачем использовать rem
Некоторые предыдущие методы адаптации использовали js для динамического вычисления значения начального масштаба области просмотра.
Например, если размер экрана 320 пикселей и установлен на 1, то экран 375 пикселей будет 375/320 = 1,18 и так далее.
Однако прямое принудительное масштабирование страницы таким образом слишком грубо, что приведет к искажению и размытию изображения и текста страницы.
Px - относительно фиксированная единица измерения, а размер шрифта фиксирован напрямую, поэтому пользователи не могут масштабировать в соответствии с размером шрифта браузера, установленным ими самими. Хотя em и rem являются относительными единицами, em относительно размера шрифта своего родительского элемента. Чем глубже уровень, тем сложнее преобразование em, а rem напрямую зависит от корневого элемента, что позволяет избежать многих иерархических отношений. Новый мобильный браузер очень совместим с rem и им можно уверенно пользоваться.
Общая конверсия и некоторые подводные камни
Иногда мы видим, что некоторые страницы, использующие rem, сначала задают стиль корневому элементу страницы:
Размер шрифта по умолчанию в большинстве браузеров составляет 16 пикселей, поэтому 1rem = 16px, что для нас не удобно для преобразования между px и rem. Предполагая, что 1rem = 10px, тогда 100px = 10rem, 25px = 0.25rem. Это позволяет легко конвертировать много, поэтому выше 10/16.
Если это проект 640, его нужно разделить на 2, чтобы преобразовать в 320, что соответствует ширине экрана iPhone5. Таким образом, черновой вариант пикселя / 2/10 преобразуется в rem. После этого медиа-запрос устанавливает процентное соотношение размера шрифта для каждого размера экрана, и страница адаптируется в соответствии с установленным выше корневым размером шрифта.
Вы думаете, что все идеально, когда вы это видите? Однако есть две глубокие ямы:
1. Я прочитал много информации о rem в Интернете, и в основном сказал, что размер шрифта по умолчанию в браузере составляет 16 пикселей, а затем напрямую определил font-size: 62,5%. Однако rem принадлежит атрибуту css3. Размер шрифта по умолчанию в некоторых ранних версиях браузеров и некоторых домашних браузерах не равен 16px, поэтому приведенное выше преобразование 10/16 недействительно, и прямое определение font-size: 62,5% для html недопустимо.
2. Chrome устанавливает минимальный размер шрифта равным 12. Если он меньше 12 пикселей, он будет рассматриваться как 12 пикселей, тогда указанное выше значение 1rem = 10 пикселей станет 1rem = 12 пикселей, и будет отклонение (демонстрация ниже).
решение:Измените 1rem = 10px на 1rem = 100px (или другие значения масштаба, которые легко преобразовать); не используйте rem на стороне ПК.
Затем следует изменить стиль корневого элемента указанной выше страницы на:
Затем используйте преобразование медиа-запроса для каждого разрешения, суммированного этой фабрикой:
На этом яма заполнена. Черновой вариант в пикселях можно напрямую преобразовать в / 100, чтобы получить значение rem.
Более точное и надежное преобразование
Однако, помимо проблем с совместимостью с указанным выше 625% Dafa, его нельзя точно адаптировать к различным проектным проектам. Это не наш лучший выбор. У Netease и Taobao есть свой набор методов адаптации, и адаптивность также идеальна.
Мобильный терминал NetEase:Исходная величина:Видно, что независимо от масштаба мобильного телефона, при увеличении страницы, ширина корпуса составляет 7,5 бэр. Очевидно, что текущий проект дизайна мобильного телефона NetEase основан на iPhone6,750 (проект дизайна, представленный дизайнером, - это физическое разрешение, которое будет вдвое выше логического разрешения нашего стиля. Если данный проект дизайна равен 640, то это будет На основе iPhone5, 320), контрольное значение - 100 пикселей (750 / 7,5 = 100). Это контрольное значение очень важно, и все следующие преобразования CSS связаны с этим контрольным значением.Динамический размер шрифта:Мы видим, что размер шрифта на рисунках 1, 2 и 3 динамически изменяется в соответствии с размером экрана, и можно вычислить формулу:
Ширина экрана / проектная ширина rem = динамическое значение размера шрифта страницы (например: 375 / 7,5 = 50)
Получите это значение и назначьте его стилю элемента html:
Таким образом, устанавливается размер корневого шрифта для каждой страницы.Поскольку единица rem основывается на размере корневого шрифта, до тех пор, пока определено преобразование проекта, соответствующего мобильному телефону, оставшиеся размеры экрана могут быть автоматически адаптированы.
Выше мы обнаружили, что эталонное значение преобразованного rem черновика дизайна равно 100, поэтому нам нужно всего лишь разделить значение в пикселях на черновике проекта на 100, чтобы получить желаемое значение rem.
Мобильный терминал Taobao:Знаменитый гибкий
Приведенная информация
Многие великие боги, в том числе коллеги в нашей компании, проанализировали этот план адаптации, поэтому я кратко резюмирую здесь:
Вводить:Прямая ссылка на файлы CDN Али (или загрузка для локального импорта)
настроить:Не устанавливайте страницу. Flexible автоматически устанавливает размер корневого шрифта для каждой ширины экрана, динамического окна просмотра и dpr для экранов Retina.
Конверсия:Предполагая, что черновик проекта такой же, как и у NetEase 750 выше, Flexible разделит черновик проекта на 10 копий, что можно понять как ширину страницы = 10 rem, то есть 1rem = 75 пикселей, поэтому размер корневого шрифта (базовое значение) = 75 пикселей.
Следующая формула преобразования css rem:
px / 75 = rem, поэтому 100px = 100/75 = 1.33rem, 50px = 50/75 = 0.66rem
Инструмент преобразования
Очевидно, можно видеть, что преобразование между px и rem несколько усложняется из-за разницы в эталонном значении и даже требует помощи калькулятора. Порекомендуйте артефакт преобразования здесь:cssrem
После установки сделайте некоторые настройки
px_to_rem - отношение единиц в пикселях к бэрам. Предполагая, что черновой вариант составляет 750, справочное значение равно 75, здесь 75
max_rem_fraction_length - максимальная длина дробной части от px до rem. По умолчанию - 6.
available_file_types - типы файлов для включения этого плагина. [".css", ".less", ".sass", ".scss"].
Шаги, преимущества и недостатки трех вышеуказанных схем преобразования
1. Установите корневой размер шрифта: 625% (или другое настраиваемое значение, но правило преобразования 1rem не может быть меньше 12 пикселей)
2. Установите размер корневого шрифта для каждого экрана отдельно с помощью медиа-запроса.
3. CSS делится на 2, а затем на 100 для преобразования в rem.
Отлично: он имеет определенную применимость, и преобразование относительно простое.
Плохое: существует некоторая несовместимость, а адаптация к различным мобильным телефонам не очень точна; необходимо настроить несколько медиа-запросов для адаптации к разным мобильным телефонам, а размер одного мобильного телефона выходит за пределы диапазона настроек, что приведет к невозможности адаптации.
1. Разделите эскиз проекта на 100, чтобы получить значение ширины rem.
2. Установив font-size для стиля html, замените значение rem ширины, полученное в 1, на x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px’;
3. Черновик дизайна px / 100 можно преобразовать в rem.
Отлично: адаптация за счет динамического размера корневого шрифта, в основном нет проблем с совместимостью, более точная адаптация и простое преобразование.
Плохо: нет масштабирования области просмотра и нет адаптации к экрану Retina iPhone, что приводит к неадекватной адаптации к некоторым телефонам.
1. Разделите черновик дизайна на 10, чтобы получить значение эталонного размера шрифта.
2. Ввести гибкий
3. Не устанавливайте значение масштабирования области просмотра для мета
4. Разработайте черновое эталонное значение px / font-size, которое можно преобразовать в rem.
Отлично: адаптация с помощью динамического корневого font-size, viewpor, dpr, без проблем с совместимостью, точная адаптация.
Нижний предел: необходимо преобразовать эталонное значение в соответствии с эскизным проектом.
Взгляните на демонстрацию ниже
Эскизный проект: На основе iPhone5, ширина 640.
Таким образом, в режиме разработки iphone5 равен 320, и все значения составляют половину размера эскизного проекта.
Ожидаемый эффект: в iPhone5 box1 имеет ширину и высоту 50 пикселей, box2 - ширину и высоту 125 пикселей, а шрифт - 15 пикселей. Другие терминалы экрана адаптируются автоматически.
Видно, что на основе отладки Chrome iPhone5 ширина и высота box1 равны 60, а ширина и высота box2 - 150. Произошла ошибка, поэтому минимальный размер шрифта, упомянутый выше, должен быть 12 пикселей.
Соотношение нормальное (экран Retina масштабирован).
Какая схема конвертации используется?
Каждого судят по разным стандартам. Но лично я предпочитаю гибкий, динамический расчет области просмотра и масштабирования dpr для мобильных телефонов iphone, чтобы адаптация страницы была более точной, а количество посещений страницы руководства намного больше, чем у страницы NetEase.
Полезен ли px для мобильных устройств?
Есть. Если соотношение изображения страницы или элемента фиксировано и вы не хотите выполнять масштабирование, rem не подходит. В настоящее время использование единиц пикселей может гарантировать, что элемент не будет искажен и размыт из-за масштабирования.
подводить итоги
На бумаге это всегда мелко, и я абсолютно знаю, как это сделать.
Различные терминальные адаптации всегда были головной болью для внешнего интерфейса. Большинство адаптаций, которые я делал раньше, предназначены только для понимания и непосредственного использования, без тщательного изучения. На этот раз просто взял на себя задачу гильдии внешнего интерфейса компании, [понять метод преобразования rem]. Я думал, что это относительно простая задача, но на самом деле это занимало много времени.Я часто сталкивался с определенным моментом и ходил проверять информацию и писать демонстрации, не задумываясь об этом. По ходу дела статья в основном была завершена, и я также понял многие свои предыдущие сомнения. Я хотел бы предложить несколько предложений, если в статье есть какие-либо ошибки, упущения или новые идеи, я надеюсь, что друзья-участники смогут выдвигать их и вместе учиться.
Читайте также: