В первый раз дизайнер вручил мне спецификацию, в которой говорилось & quot;body text 16px, заголовки 28px, мелкий шрифт 13px& quot; и front-end лид сказал & quot; но мы отправляем все в rem, & quot; я сделал разделение вручную в приложении калькулятора. шестнадцать на шестнадцать - один, двадцать восемь на шестнадцать - один пункт семь пять, тринадцать на шестнадцать - ноль восемь, два пять. Затем базовый размер шрифта изменился до десяти пикселей для & quot;62.5% & quot; настройка на другой проект, и я сделал все это снова. после третьего раза я построил небольшой преобразователь в рабочий процесс Toolz.dev, и он незаметно спас меня от арифметических ошибок почти на каждом компоненте, который я стилизовал с тех пор.
TL;DR: Преобразователь единицы CSS превращает значение в одной единице - px, rem, em, pt или % - в эквивалентное значение в каждой другой единице, исходя из размера корневого шрифта, которым вы управляете (16px по умолчанию). Чтобы преобразовать px в rem, разделите пиксели на размер корневого шрифта:
24px ÷ 16 = 1.5rem. Чтобы пойти другим путем, умножьте:1.5rem × 16 = 24px, йо- выше Конвертер единиц CSS делает это мгновенно для каждого устройства одновременно, полностью работает в вашем браузере и включает в себя справочную таблицу px-to-rem, из которой вы можете скопировать.
В этом руководстве рассказывается о том, как связаны устройства, почему размер базового шрифта так важен, когда нужно обращаться к каждому устройству, а также о точной математике, которую выполняет преобразователь. Я стилизовал множество интерфейсов между темами WordPress, пользовательским интерфейсом администратора WP Adminify и панелями мониторинга React, и во всех из них возникает вопрос о единице. Правила просты, как только вы видите единый номер, на котором все висит.
Почему значение имеет преобразование px в rem?
Пиксели - это единица измерения, которую экспортирует почти каждый инструмент проектирования. Фигма, Эскиз и Фотошоп - все они мыслят в пикселях, поэтому спецификация передачи обслуживания - это список значений пикселей. Пиксели также легко рассуждать, потому что один пиксель CSS - это фиксированный эталонный размер, который не меняется, когда пользователь что-либо настраивает.
Эта фиксированность является именно проблемой для доступных, отзывчивых интерфейсов. когда кто-то увеличивает размер шрифта своего браузера и #39;s по умолчанию - настройка, на которую полагаются многие люди с низким зрением - текст размером в фиксированные пиксели полностью игнорирует изменение. Текст размером в шкалу Rem с ним. То же самое относится и к масштабированию браузера в некоторых старых конфигурациях и таблицах пользовательских стилей. Если вы хотите, чтобы ваша типографика уважала предпочтения читателя и #39;s, вы размещаете ее в относительной единице, и Rem - это та, которая ведет себя предсказуемо на всей странице.
Итак, общий рабочий процесс: дизайн в пикселях, корабль в вещ. Это оставляет вас делать деление весь день, и деление - это то, где маленькие ошибки заползают. Написание 0.8125rem вместо 0.875rem для значения 13px является вид опечатка, которая отправляет в производство и делает один ярлык выглядит слегка неправильно конвертер снимает этот риск, что является всей причиной, что я держу один в досягаемости Если вы работаете над многими из этих задач, более широкий Набор инструментов для веб-разработчиков охватывает случаи, когда преобразование единиц соответствует другим повседневным работам.
В чем разница между px, rem, em, pt и %?
Каждый из этих блоков во время рендеринга разрешается на несколько пикселей CSS, и это взаимосвязь Значения и единицы CSS Уровень 4 контакты вниз: опорный пиксель определяется на дисплее 96 dpi, а не на экране. Разница в том, против чего они измеряются.
пх является CSS опорный пиксель, Это абсолютная единица в том смысле, что она не зависит от какого-либо размера шрифта. 1px есть 1px. Это делает его предсказуемым, но в то же время не отвечающим предпочтениям пользователя.
рем означает & quot;root em.& quot; One rem равен размеру шрифта корневого элемента - the html элемент. По умолчанию это 16px, так что 1rem есть 16px, 1.5rem есть 24px, и 0.5rem есть 8px. Поскольку оно всегда привязано к корню, значение rem означает одно и то же повсюду в документе, независимо от того, насколько глубоко вложен элемент.
эм относительно размера шрифта текущий элемент. если размер шрифта 's равен 20px, то 1em внутри он 20px, 1.5em составляет 30px, и так далее. загвоздка в том, что em соединения: если родитель устанавливает font-size: 1.2em и ребенок тоже садится 1.2em, ребенок's эффективный размер составляет 1.2 × 1.2 дедушки и бабушки Этот инструмент предполагает элемент, размер которого находится в основании, поэтому em и rem читают то же самое - и вы моделируете конкретный контекст em, устанавливая размер базового шрифта на этот элемент's размер.
пт является ли точка, унаследованная от печатной типографики. CSS определяет один дюйм как 96 пикселей и 72 точки, так что 1pt равно 96/72 ≈ 1,333px, и 1px равно 0,75pt.Точки принадлежат в таблицах стилей печати; на экране они всего лишь фиксированное кратное опорному пикселю.
% для размера шрифта - процент от родительского элемента (или, в корне, от основания). 100% равен эталонному размеру и 50% равен половине от него. при базе 16px, 100% является 16px и 150% составляет 24px.
Вот как общие значения выстраиваются в корне 16px по умолчанию:
| пх | рем | эм | пт | % |
|---|---|---|---|---|
| 12 | 0,75 | 0,75 | 9 | 75 |
| 14 | 0,875 | 0,875 | 10,5 | 87,5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13,5 | 112,5 |
| 24 | 1,5 | 1,5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
выше Конвертер единиц CSS генерирует всю эту таблицу для любой установленной вами базы, поэтому вы можете просмотреть всю шкалу типов одновременно.
Как базовый размер шрифта меняет все?
Базовый (корневой) размер шрифта является основой для каждой относительной единицы. Измените его, и каждое преобразование rem, em и % меняется вместе с ним, в то время как px и pt остаются на месте.
По умолчанию браузер имеет размер 16px, поэтому 1rem нормально 16px. Но вы можете установить корень для чего угодно. популярный шаблон устанавливает html { font-size: 62.5%; }, что делает корень 10px (62,5% от 16). сейчас 1rem является чистым 10px, и rem math становится & quot;move десятичной точки& quot;: 1.6rem - это 16px, 2.4rem - это 24px, 0.8rem - это 8px. Команды принимают это, поэтому числа в их таблицах стилей читаются почти как пиксели, продолжая масштабироваться с предпочтениями пользователя.
Чтобы смоделировать это в конвертере, установите размер базового шрифта на 10 и прочитайте столбец rem. Значение 24px теперь отображается как 2.4rem вместо 1.5rem.Так же вы рассуждаете об em в компоненте, который устанавливает собственный размер шрифта: если карта устанавливается font-size: 20px, то значения em внутри него относительно 20, поэтому установите основание на 20, чтобы посмотреть, что 1.5em решает.
Ошибка, которую я вижу чаще всего, забыть, по какому основанию было вычислено значение Кто-то преобразует 24px в 1.5rem предполагая 16px корень, затем роняет его в проект запуска 62.5% трюк где корень 10px - и 1.5rem там 15px, а не 24px. единица относительна, поэтому число означает что-то только после того, как вы знаете основание Всякий раз, когда я вставляю значение rem между проектами, я проверяю сначала размер корневого шрифта.
Как вручную конвертировать px в rem и rem в px?
Математика - это одно деление и одно умножение.
px для рем: разделите значение пикселя на размер корневого шрифта.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
бэр к пх: умножьте значение rem на размер корневого шрифта.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px к эму использует ту же формулу, что и rem, когда элемент находится в базовом размере шрифта, так что 24px ÷ 16 = 1.5em. Разница концептуальная, а не арифметическая: em измеряется по текущему элементу, поэтому, если размер этого элемента 's отличается от корня, вы используете его размер в качестве основания.
от PX до Pt: умножить на 0,75, т.к 1px = 0.75pt, йо- поэтому 16px × 0.75 = 12pt. Идя другим путем, pt × 1.333 = px, йо-
от PX до %: разделить на основание и умножить на 100. так 24px ÷ 16 × 100 = 150%, йо-
Все это не сложно, но делать это сорок раз, пока стайлинг компонента, - это то, где усталость производит опечатки. Это именно такая повторяющаяся, подверженная ошибкам задача Инструменты повышения производительности разработчик философия говорит автоматизировать - разгрузить арифметику, чтобы ваше внимание оставалось на дизайне.
Когда нужно использовать каждый блок?
Не существует единого правильного подразделения; для каждой работы есть подходящий блок.
Используйте rem для размеров шрифтов. Это самая сильная рекомендация в списке.Rem масштабируется с пользователем & #39;s браузер размер шрифта предпочтение, которое является реальным доступность выигрыш, и потому что он привязан к корню он не усугубляет неожиданно. большинство команд размер все их тип в вещном.
Используйте rem или px для определения интервала, в зависимости от вашей системы. Многие системы проектирования выражают запас и заполнение в вещном виде, так что расстояние между масштабами и типом. Другие сохраняют интервал в px для идеальных для пикселей макетов. Оба являются защищенными; выберите один и будьте последовательны.
Используйте em для вещей, которые должны масштабироваться с их собственным элементом. Набивка на кнопку, которая должна расти вместе с кнопкой's размер шрифта является классическим em использование - установить набивку в em и он отслеживает текст автоматически.Icon размер относительно соседнего текста является другим.
Используйте px для границ и мелких деталей. равняется 1px граница обычно должна оставаться 1px; вы редко хотите, чтобы линия волос масштабировалась с размером шрифта. Точки останова медиа-запросов также часто записываются в формате px, хотя некоторые предпочитают там эм для масштабирования.
Используйте pt только в таблицах стилей печати. Если вы что-то ставите для @media print, точки являются родной единицей печати и стоит использовать. на экране, предпочитайте px или rem.
Используйте % для ширины жидкости, а иногда и для размеров шрифтов. Процент везде в макете (width: 50%), а в качестве размера шрифта иногда используется в корне для трюка 62,5%.
Какие ошибки часто встречаются с подразделениями CSS?
Первая - это уже описанная проблема несоответствия оснований: преобразование в неправильный размер корневого шрифта Всегда знайте свой корень, прежде чем доверять номеру rem.
Второй - слишком точные значения бэр. некоторые преобразования делятся не равномерно - 15px при базе 16px составляет 0,9375rem, а 13px - 0,8125rem.Эти длинные десятичные дроби точны, но уродливы, и округление их слишком сильно (скажем, до 0,94rem) сдвигает визуализированный размер на долю пикселя.Мое правило: сохраняйте три или четыре десятичных дроби для бэр, или выбирайте базовые и размерные значения, которые делятся чисто. конвертер разумно обходит и обрезает конечные нули так 24px читает как 1.5rem а не 1.5000rem, йо-
Третий - усложнение э. Вложенные элементы, каждый из которых устанавливает размер шрифта em, умножают эффект, поэтому глубоко вложенный элемент может оказаться намного больше или меньше, чем предполагалось. Если вы обнаружите, что это удивительно, то почти всегда именно поэтому - переключите их на rem, и сюрприз исчезнет.
Четвертый предполагает, что pt и px взаимозаменяемы. Они не являются; 12pt есть 16px, не 12px. Смешивание их в таблице стилей, охватывающей экран и печать, является тонкой ошибкой.
Как преобразователь Toolz.dev обрабатывает математические вычисления?
Под капотом конвертер использует одну идею: выразить каждую единицу как число пикселей, затем преобразовать через пиксели. у каждой единицы фиксированный & quot;пикселей на единицу & quot; учитывая размер базового шрифта - px равен 1, rem и em являются базой, pt равен 96/72, а % - базой/100. для преобразования он умножает входные данные на свою единицу & #39; пикселей на единицу, чтобы получить значение пикселя, затем делится на целевую единицу & #39; пикселей на единицу. Этот одиночный проход дает каждую единицу сразу, поэтому вы видите px, rem, em, pt и % обновления вместе по мере ввода.
Он также анализирует значения с помощью прикрепленных единиц, поэтому вставляет 24px заполняет и номер, и единицу для вас. результаты округляются до нескольких десятичных знаков и лишаются конечных нулей для читаемости, и каждый имеет кнопку копирования одним щелчком мыши, которая копирует значение с помощью своего единичного суффикса, готового вставить в CSS. Все работает на стороне клиента - ничего, что вы вводите, не загружается - что соответствует подход "конфиденциальность прежде всего" за каждым инструментом на сайте.
Если вы также выбираете цвета или создаете тени для того же компонента, Генератор градиента CSS а Коробка Теневой Генератор живите одним щелчком мыши и шире преобразователь единиц обрабатывает физические единицы, такие как длина и вес, когда ваша работа выходит за пределы CSS.
Часто задаваемые вопросы
Как преобразовать PX в REM?
Разделите значение пикселя на размер корневого шрифта. При по умолчанию браузера 16px REM = PX ÷ 16, поэтому 16px — это 1 REM, 24 пикселей — 1,5 REM, а 8 пикселей — 0,5 REM. Введите значение пикселя в конвертер, и эквивалент REM появится мгновенно при любом установленном вами базовом формате.
Как преобразовать REM в PX?
Умножьте значение REM на размер корневого шрифта. При базе 16px Px = REM × 16, поэтому 1REM — 16 пикселей, 1,5 REM — 24 пикселя, а 0,75 — 12 пикселей. Измените базовый размер шрифта в инструменте, если ваш элемент HTML использует другое значение.
Какой размер корневого шрифта по умолчанию?
Браузеры устанавливают html-элемент на 16px по умолчанию, поэтому этот конвертер начинается с 16. поскольку 1rem всегда равен размеру корневого шрифта, по умолчанию 16px равен ровно 1rem. Пользователи могут изменить свой браузер и #39;s размер текста по умолчанию, что является одной из причин, по которой rem предпочтителен для доступной масштабируемой типографики.
В чем разница между REM и EM?
Рем всегда относительно размера корневого html шрифта, поэтому он остается согласованным на всей странице. em относительно размера шрифта текущего элемента, поэтому он может усугубляться, когда каждый вложенный элемент устанавливает свой собственный размер. Установите базовый размер шрифта в инструменте для моделирования определенного контекста em.
Как связаны PX и PT в CSS?
CSS определяет один дюйм как 96 пикселей и 72 точки, поэтому 1pt равен 96/72 ≈ 1,333px, а 1px равен 0,75pt. Очки приходят из печатной типографики; на экране они являются фиксированным кратным опорного пикселя CSS. Используйте px или rem для работы на экране и зарезервируйте pt для стилей печати.
Что делает трюк с размером шрифта 62,5%?
Установка размера шрифта html на 62,5% делает размер корневого шрифта 10px, поэтому 1rem становится удобным 10px и математика rem превращается в перемещение десятичной - 1,6rem равен 16px, 2,4rem равен 24px. Чтобы смоделировать это в конвертере, установите размер базового шрифта на 10 и прочитайте столбец rem.
Должен ли я использовать px или rem для размеров шрифта?
Rem обычно предпочтителен для размеров шрифтов, поскольку он масштабируется с предпочтением размера шрифта браузера 's, что улучшает доступность, а фиксированный px - нет. Многие команды проектируют в формате px и преобразуют в rem для окончательного CSS. Детали макета, такие как границы, часто остаются в формате px.
Почему преобразованное значение иногда имеет длинные десятичные дроби?
Некоторые преобразования не являются точными - 15px при базе 16px составляет 0.9375rem, а значения pt часто дают повторяющиеся десятичные дроби Инструмент округляется до нескольких десятичных знаков и обрезает конечные нули для читаемости Для идеальных для пикселей макетов круглые значения rem до двух или трех десятичных дробей или выбирает базу, которая делит ваши размеры чисто.
