Как перевести пиксели в проценты css
Обновлено: 03.07.2024
Пиксели могут использоваться, чтобы определить размер шрифта или ширину и высоту div, например. Но когда вы определяете размер с использованием пикселей, этот размер является статическим, поэтому размер div размером 500 пикселей будет отображаться на этом уровне независимо от того, просматривается ли оно на рабочем столе или на мобильном устройстве.
Ems с другой стороны являются масштабируемыми единицами измерения. Em соответствует текущему размеру шрифта, поэтому их намного проще использовать для управления размером элементов на основе видового экрана. Если ширина div всегда равна 10, то все, что вам нужно сделать, это изменить размер шрифта тела веб страницы, и соответственно изменится ширина div. Это значительно облегчает изменение размеров элементов на основе размера видового экрана, потому что вам нужно изменить размер одного элемента "размер шрифта", чтобы изменить их все.
Но для многих дизайнеров и разработчиков пиксели, это то, как они узнали, и к чему они привыкли. Если это так, то вам повезло, есть пиксель конвертеры которые можно использовать, чтобы вы точно знали, сколько ems создать элемент. Ознакомьтесь со списком некоторых из лучших конвертеров ниже.
Px to Em предоставляет вам удобные справочные таблицы, которые показывают коэффициенты конверсии на основе базового размера шрифта. Если вы не хотите, чтобы это выглядело, вы можете просто ввести всю информацию в свой конвертер и вам будет предоставлена ваша пользовательская конверсия.
Еще один отличный способ конвертировать, этот конвертер снимает все предположения и не предоставляет таблицы или диаграммы. Просто введите размер пикселя по умолчанию, где FYI в большинстве браузеров, это 16px, но если вы изменили его на что-то другое с помощью CSS. Обязательно учтите это, и px или em, где вы хотите конвертировать к другой единице измерения. Этот конвертер делает px к em и наоборот, поэтому у вас есть все ваши базы.
Это еще одно отличное приложение для конвертеров, которое почти достигает того же эффекта, что и два других в этом списке, но имеет очень чистый дизайн и очень прост и прост в использовании.
Независимо от того, какой конвертер вы используете для перехода между px и em, ваши отзывчивые проекты будут вам благодарны, и так будет ваше расписание. Вы определенно заметите меньшее время, затрачиваемое на отзывчивый стиль, если вы переключаетесь с фиксированных пиксель единиц измерения на масштабируемые и мобильные устройства.
Существует много свойств CSS, которые требуют размер в качестве единицы:
- font-size определяет размер текста;
- border-width определяет толщину границ элементов;
- margin определяет пространство между элементами;
- left / right / top / bottom позволяют позиционировать и перемещать элементы.
Наиболее часто используемые единицы:
- px для пикселей;
- % для процентов;
- em для определения размера относительно родительского значения font-size .
Пиксели
Поскольку компьютерные экраны используют пиксели для отображения содержимого, это самая распространённая единица размера в CSS.
Пиксель может быть использован для задания фиксированной ширины элемента:
Или установить размер текста:
Пиксели в CSS являются простыми, поскольку они определяют абсолютные значения и не зависят от других наследуемых свойств CSS.
Они также широко используются для позиционирования и расстояния.
Проценты
Проценты — это относительные единицы: они полагаются на родителя и/или предка элемента.
К примеру, блочные элементы, такие как абзацы, естественным образом занимают всю доступную ширину. Следующее правило CSS изменит их размер до половины доступной ширины.
Проценты могут помочь задать другие свойства CSS, такие как размер текста.
em является относительной единицей и зависит от значения font-size элемента.
Например, если у родителя font-size задан как 20px и вы применяете font-size: 0.8em к дочернему элементу, то этот дочерний элемент будет отображать font-size как 16px.
Не следует путать размер em с селектором em , который ориентирован на элемент <em> .
Единица em интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши <h1> были вдвое больше, чем основной текст, ваши <h2> в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:
Если вы решите изменить размер текста <body> , относительные размеры заголовков и боковой панели изменятся соответственно и ваша веб-страница останется визуально сбалансированной.
Только изменив одно значение, поменяются и все остальные значения:
Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент <html> .
Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.
Если вы установили html < font-size: 18px; >:
- 2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
- 2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.
Быстрый пример, где 2em отличается от 2rem:
<span> полагается на значение font-size у <р> , в то время как <strong> полагается на значение font-size у <html> .
Какую единицу использовать?
Я бы рекомендовал начать с пикселей: поскольку это абсолютная величина, они не зависят от контекста элемента. Пиксели простые, позволяют установить размер текста, ширину и высоту изображения, толщину границы, координаты положения и др.
Проценты и значения em могут быть использованы наряду с пикселями, особенно для относительных размеров текста.
Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов.
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
Преобразование points в pixels, ems или в проценты в CSS
Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты. Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.
Кстати, если в макете дизайна сайта, сделанного в Фотошопе, разрешение файла 72 точки на дюйм, то размер шрифта 12 пунктов в Фотошопе будет соответствовать 12 пикселям в каскадной таблице стилей CSS.
Таблица преобразования points в pixels, ems или проценты
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
CSS конвертировать проценты в пиксели
Вы можете использовать
(el является ссылкой на элемент)
Обратите внимание, что эти свойства были впервые введены в объектной модели MS IE DHTML. Совсем недавно они были стандартизированы в модуле просмотра CSSOM, рабочем проекте W3C от 22 февраля 2008 г.
Эти свойства получили широкую поддержку. Однако это возможно, чем старый браузер, не совместимый с MS, и не поддерживает их. В этих случаях вы можете использовать getComputedStyle:
Поддержка браузера getComputedStyle и clientHeight/clientWidth не менее:
Преобразование points в pixels, ems или в проценты в CSS
Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты. Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.
Кстати, если в макете дизайна сайта, сделанного в Фотошопе, разрешение файла 72 точки на дюйм, то размер шрифта 12 пунктов в Фотошопе будет соответствовать 12 пикселям в каскадной таблице стилей CSS.
Таблица преобразования points в pixels, ems или проценты
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Знакомство с единицами измерения CSS: пикселями, EM и процентами
Единицы измерения играют важную роль в построении домов, мостов и башен, и создание веб-сайтов — не исключение. Для создания сайтов, в особенности в CSS, используется ряд единиц измерения таких как пиксели, EM и проценты. В этом уроке мы познакомимся со всеми этими единицами измерения.
Пиксель
Пиксель — это фиксированная единица измерения и наименьшая единица измерения экрана, но не путайте его с пикселем, которой определяет разрешение экрана. Пиксель в CSS не связан с разрешением экрана. Если мы откроем веб-страницу фиксированной ширины в 1024px, допустим, на планшете с разрешением экрана 1024px на 480px, веб-страница не поместится в экран.
Мы сталкивались с этой проблемой раньше и обнаружили, что пиксель в CSS – это не линейная единица измерения, по факту это векторная единица измерения. По сути пиксель в CSS измеряет длину показываемой области, а не разрешение экрана, т. е., если разрешение экрана 1024px, то это не значит, что страница будет иметь ширину 1024px.
Еще о пикселях
Если вы разбираетесь в тригонометрии и хотите узнать больше, посмотрите следующее объяснение от Sean B. Plamer: «Пиксель в CSS – это угловая единица измерения».
Определение размера экрана
Так как же узнать реальный размер экрана устройства? К счастью, существует удобный специальный калькулятор, чтобы приблизительно оценить размер экрана в пикселях, Сантиметры в пиксели. Нам понадобятся только длина и ширина экрана устройства и PPI (пиксели на дюйм) / DPI (точки на дюйм), эти данные Вы можете получить с упаковки устройства.
Размер пикселя в Photoshop
Работая в Photoshop, можно заметить, что размер шрифта по умолчанию задан в Pt (Points, точки). Единица измерения Pt очень подходит для стилей печати. Чтобы не путать Pt и Px, когда мы преобразуем документ в веб-сайт, мы можем изменить единицы измерения в следующем меню: Edit/Редактировать > Preferences/Настройки > Units and Rulers/Единицы и линейки.
И там откроется окно с настройками, как показано на снимке экрана ниже. Выберите pixels (пиксели) для Type unit/тип единц.
И после этого размер шрифта отображается в пикселях.
EM — это относительная единица измерения. В CSS EM обозначает множитель размера шрифта по умолчанию у устройства или документа.
Например, допустим, в документе размер шрифта задан как 16px. 1em равен 16px, 2em – 32px и так далее. Хотя EM обычно используется для обозначения размера шрифта и фактически это стандартная единица измерения в стилях браузера для измерения размера шрифта, мы можем также использовать EM, чтобы задавать длину элемента.
Другой способ — установить размер пикселя по умолчанию равным 10px, чтобы было удобнее считать, например, задав 15px как 1.5em. Надеемся, вы получили общее представление с помощью этого примера.
Процент
С процентом все более понятно, он устанавливается относительно родительского блока. Если ширина родительского блока 800px, тогда 50% будет 400px. За последние годы адаптивный дизайн становится стандартом в веб-дизайне, так что единица измерения процент используется все чаще.
Давайте рассмотрим следующий пример, в отрывке кода ниже задается значение ширины, равное 60%, блокам классов .container и .main, но у блоков этих классов разные родительские блоки, так что они будут разной длины. Блок класса .container займет 60% ширины видимой области браузера, а блок класса .main займет 60% ширины своего родительского блока класса .container.
Таким образом, мы получим следующий результат:
Так как процент тоже относительная единица измерения, с ним есть такая же проблема, как и с единицами измерения EM. Может быть сложно быстро сосчитать в уме, сколько процентов от 500px составит 15px. Это обычно происходит, когда мы переводим единицы измерения пиксели из фазы дизайна в веб-страницу. Есть два пути, которыми можно решить эту проблему: Вы можете традиционно считать с помощью калькулятора, или, если Вам удобно использовать предобработчик CSS, Вы можете использовать функцию percentage()из Sass.
Заключение
Вокруг использования единиц измерения в веб-дизайне разворачивается много дискуссий. Но в идеале единица измерения пиксель должна быть использована, когда свойства по большей части должны быть точными, например, для установки значений размеров вертикального или горизонтального смещения для таких свойств, как border-radius и box-shadow, а единицу измерения EM, как рекомендовано W3C, лучше использовать для размера шрифта. Процент — идеальная единица измерения для использования в адаптивной разметке.
Единицы измерения играют важную роль в построении домов, мостов и башен, и создание веб-сайтов — не исключение. Для создания сайтов, в особенности в CSS, используется ряд единиц измерения таких как пиксели, EM и проценты. В этом уроке мы познакомимся со всеми этими единицами измерения.
Пиксель
Пиксель — это фиксированная единица измерения и наименьшая единица измерения экрана, но не путайте его с пикселем, которой определяет разрешение экрана. Пиксель в CSS не связан с разрешением экрана. Если мы откроем веб-страницу фиксированной ширины в 1024px, допустим, на планшете с разрешением экрана 1024px на 480px, веб-страница не поместится в экран.
Мы сталкивались с этой проблемой раньше и обнаружили, что пиксель в CSS – это не линейная единица измерения, по факту это векторная единица измерения. По сути пиксель в CSS измеряет длину показываемой области, а не разрешение экрана, т. е., если разрешение экрана 1024px, то это не значит, что страница будет иметь ширину 1024px.
Еще о пикселях
Если вы разбираетесь в тригонометрии и хотите узнать больше, посмотрите следующее объяснение от Sean B. Plamer: «Пиксель в CSS – это угловая единица измерения».
Определение размера экрана
Так как же узнать реальный размер экрана устройства? К счастью, существует удобный специальный калькулятор, чтобы приблизительно оценить размер экрана в пикселях, Сантиметры в пиксели. Нам понадобятся только длина и ширина экрана устройства и PPI (пиксели на дюйм) / DPI (точки на дюйм), эти данные Вы можете получить с упаковки устройства.
Размер пикселя в Photoshop
Работая в Photoshop, можно заметить, что размер шрифта по умолчанию задан в Pt (Points, точки). Единица измерения Pt очень подходит для стилей печати. Чтобы не путать Pt и Px, когда мы преобразуем документ в веб-сайт, мы можем изменить единицы измерения в следующем меню: Edit/Редактировать > Preferences/Настройки > Units and Rulers/Единицы и линейки.
И там откроется окно с настройками, как показано на снимке экрана ниже. Выберите pixels (пиксели) для Type unit/тип единц.
И после этого размер шрифта отображается в пикселях.
EM — это относительная единица измерения. В CSS EM обозначает множитель размера шрифта по умолчанию у устройства или документа.
Например, допустим, в документе размер шрифта задан как 16px. 1em равен 16px, 2em – 32px и так далее. Хотя EM обычно используется для обозначения размера шрифта и фактически это стандартная единица измерения в стилях браузера для измерения размера шрифта, мы можем также использовать EM, чтобы задавать длину элемента.
Другой способ — установить размер пикселя по умолчанию равным 10px, чтобы было удобнее считать, например, задав 15px как 1.5em. Надеемся, вы получили общее представление с помощью этого примера.
Процент
С процентом все более понятно, он устанавливается относительно родительского блока. Если ширина родительского блока 800px, тогда 50% будет 400px. За последние годы адаптивный дизайн становится стандартом в веб-дизайне, так что единица измерения процент используется все чаще.
Давайте рассмотрим следующий пример, в отрывке кода ниже задается значение ширины, равное 60%, блокам классов .container и .main, но у блоков этих классов разные родительские блоки, так что они будут разной длины. Блок класса .container займет 60% ширины видимой области браузера, а блок класса .main займет 60% ширины своего родительского блока класса .container.
Таким образом, мы получим следующий результат:
Так как процент тоже относительная единица измерения, с ним есть такая же проблема, как и с единицами измерения EM. Может быть сложно быстро сосчитать в уме, сколько процентов от 500px составит 15px. Это обычно происходит, когда мы переводим единицы измерения пиксели из фазы дизайна в веб-страницу. Есть два пути, которыми можно решить эту проблему: Вы можете традиционно считать с помощью калькулятора, или, если Вам удобно использовать предобработчик CSS, Вы можете использовать функцию percentage()из Sass.
Заключение
Вокруг использования единиц измерения в веб-дизайне разворачивается много дискуссий. Но в идеале единица измерения пиксель должна быть использована, когда свойства по большей части должны быть точными, например, для установки значений размеров вертикального или горизонтального смещения для таких свойств, как border-radius и box-shadow, а единицу измерения EM, как рекомендовано W3C, лучше использовать для размера шрифта. Процент — идеальная единица измерения для использования в адаптивной разметке.
Читайте также: