Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов.
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
Главная » Разное » Как перевести пиксели в проценты css
Как перевести пиксели в проценты css
Преобразование 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
EM — это относительная единица измерения. В CSS EM обозначает множитель размера шрифта по умолчанию у устройства или документа.
Например, допустим, в документе размер шрифта задан как 16px. 1em равен 16px, 2em – 32px и так далее. Хотя EM обычно используется для обозначения размера шрифта и фактически это стандартная единица измерения в стилях браузера для измерения размера шрифта, мы можем также использовать EM, чтобы задавать длину элемента.
Единственная проблема при использовании EM – это то, что он не очень интуитивно понятен, но есть два способа справиться с этим. Во-первых, мы можем использовать удобный калькулятор PX в 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, лучше использовать для размера шрифта. Процент — идеальная единица измерения для использования в адаптивной разметке.
Автор урока Thoriq Firdaus
Пиксели, em, проценты, а пустое значение?
В некоторых свойствах мы не указываем px , em или проценты, а просто указываем, к примеру, свойство: 0 . А что мы присваиваем? Почему нет px и т. д.?
Отслеживать
8,576 4 4 золотых знака 21 21 серебряный знак 36 36 бронзовых знаков
задан 20 июл 2021 в 13:08
Петя Паркер Петя Паркер
71 5 5 бронзовых знаков
Ноль это такое специальное исключение которому не обязательно указывать единицу изменения. Потому что 0 пикселей и 0 em-ов это одно и то же. Впрочем, при этом есть случаи когда даже у ноля нужно указывать.
20 июл 2021 в 13:25
Потому что 0px == 0rem == 0% == 0mm == . == 0 <чегоУгодно>. И ноль все же обозначает не отсутствие значения (пустоту), а скорее «точку отсчета у непрерывных числовых величин».
20 июл 2021 в 13:37
Указывать после нуля единицы измерения можно (такое значение в CSS будет валидным), а плохой практикой это считается просто потому, что указание юнитов у нуля не имеет практического смысла (оно ни на что не влияет технически, и только затрудняет восприятие).
20 июл 2021 в 13:45
Ноль можно не указывать, если есть нормализация css (кстати рекомендую normalize.css [github.com/necolas/normalize.css/blob/master/normalize.css]) и/или вы уверены в наследуемости. Но всё же. В ключевых значениях, например margin или padding, ноль рекомендую проставлять. Во избежание всяческих ошибок.
Как перевести пиксели в проценты css
Пиксели могут использоваться, чтобы определить размер шрифта или ширину и высоту div, например. Но когда вы определяете размер с использованием пикселей, этот размер является статическим, поэтому размер div размером 500 пикселей будет отображаться на этом уровне независимо от того, просматривается ли оно на рабочем столе или на мобильном устройстве.
Ems с другой стороны являются масштабируемыми единицами измерения. Em соответствует текущему размеру шрифта, поэтому их намного проще использовать для управления размером элементов на основе видового экрана. Если ширина div всегда равна 10, то все, что вам нужно сделать, это изменить размер шрифта тела веб страницы, и соответственно изменится ширина div. Это значительно облегчает изменение размеров элементов на основе размера видового экрана, потому что вам нужно изменить размер одного элемента «размер шрифта», чтобы изменить их все.
Но для многих дизайнеров и разработчиков пиксели, это то, как они узнали, и к чему они привыкли. Если это так, то вам повезло, есть пиксель конвертеры которые можно использовать, чтобы вы точно знали, сколько ems создать элемент. Ознакомьтесь со списком некоторых из лучших конвертеров ниже.
Px to Em предоставляет вам удобные справочные таблицы, которые показывают коэффициенты конверсии на основе базового размера шрифта. Если вы не хотите, чтобы это выглядело, вы можете просто ввести всю информацию в свой конвертер и вам будет предоставлена ваша пользовательская конверсия.
Еще один отличный способ конвертировать, этот конвертер снимает все предположения и не предоставляет таблицы или диаграммы. Просто введите размер пикселя по умолчанию, где FYI в большинстве браузеров, это 16px, но если вы изменили его на что-то другое с помощью CSS. Обязательно учтите это, и px или em, где вы хотите конвертировать к другой единице измерения. Этот конвертер делает px к em и наоборот, поэтому у вас есть все ваши базы.
Это еще одно отличное приложение для конвертеров, которое почти достигает того же эффекта, что и два других в этом списке, но имеет очень чистый дизайн и очень прост и прост в использовании.
Независимо от того, какой конвертер вы используете для перехода между px и em, ваши отзывчивые проекты будут вам благодарны, и так будет ваше расписание. Вы определенно заметите меньшее время, затрачиваемое на отзывчивый стиль, если вы переключаетесь с фиксированных пиксель единиц измерения на масштабируемые и мобильные устройства.
Преобразование points в pixels, ems или в проценты в CSS
Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты.
Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.
Кстати, если в макете дизайна сайта, сделанного в Фотошопе, разрешение файла 72 точки на дюйм, то размер шрифта 12 пунктов в Фотошопе будет соответствовать 12 пикселям в каскадной таблице стилей CSS.
Единицы размера в CSS
Существует много свойств 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 интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши были вдвое больше, чем основной текст, ваши в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:
Если вы решите изменить размер текста , относительные размеры заголовков и боковой панели изменятся соответственно и ваша веб-страница останется визуально сбалансированной.
Только изменив одно значение, поменяются и все остальные значения:
Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент .
Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.
Если вы установили html :
- 2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
- 2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.
Быстрый пример, где 2em отличается от 2rem:
полагается на значение font-size у , в то время как полагается на значение font-size у .
Какую единицу использовать?
Я бы рекомендовал начать с пикселей: поскольку это абсолютная величина, они не зависят от контекста элемента. Пиксели простые, позволяют установить размер текста, ширину и высоту изображения, толщину границы, координаты положения и др.
Проценты и значения em могут быть использованы наряду с пикселями, особенно для относительных размеров текста.
Отзывчивый веб-дизайн.
Вместо того чтобы переносить значения в пикселях из оригинал-макета в СSS, мы должны перевести эти размеры в относительные, пропорциональные значения. В результате мы получим сетку, которая будет трансформироваться в зависимости от области просмотра, причем оригинальные пропорции дизайна останутся неизменными.
Давайте начнем с первого элемента #раgе , который содержит наш макет, и попробуем что-нибудь с ним сделать:
mаrgin: 36рх аutо;
Противные, гадкие пиксели. Терпеть их не можем!
Ну ладно, не такие уж они и отвратительные. Помните: в макетах с фиксированной шириной нет ничего плохого! Но нам нужна более гибкая сетка, поэтому давайте попробуем перевести эти 960 пикселей в проценты.
mаrgin: 36рх аutо;
Должен признаться, что я пришел к этим 90 % без особых на то оснований, просто пробовал различные варианты в окне браузера, а затем выбрал тот, что понравился мне больше всего. Задавая значение элемента #раgе в процентах, мы создаем контейнер, который будет увеличиваться и уменьшаться в зависимости от области просмотра (рис. 2.16). И поскольку он отцентрирован по горизонтали, справа и слева останутся отступы по 5 %.
Рис. 2.16. Наш контейнер изменяется в размерах при любом изменении размера окна браузера
Пока все идет неплохо. Теперь давайте примемся непосредственно за модуль .blоg . Чуть ранее, когда мы играли с пикселями, то установили следующее правило:
mаrgin: 0 аutо 53рх;
Теперь вместо величины в пикселях мы должны выразить ширину элемента .blоg в пропорциональных величинах: описать ее как процент ширины содержащего его элемента. И вот здесь нам снова пригодится формула tаrgеt соntехt = rеsult .
Из оригинал-макета мы знаем, что ширина нашего блога должна составлять 900рх . Теперь нам нужно представить эту ширину в относительных единицах, процентах ширины родительского элемента для элемента .blоg . Поскольку блок .blоg вложен в элемент #раgе , ширина которого в соответствии с оригинал-макетом составляет 960 пикселей, это и есть наш контекст.
Давайте разделим ширину .blоg ( 900 ) на его контекст ( 960 ):
900 / 960 = 0,9375.
У нас получилось 0,9375. Число выглядит не особенно впечатляюще. Но, передвинув запятую на два знака, мы получаем 93,75 % и заносим их прямо в СSS:
mаrgin: 0 аutо 53рх;
width: 93,75 %; /* 900рх / 960рх */
(Так же как и в случае с размерами шрифтов, я записал формулу в поле комментария справа от значения ширины ( width ). Это, разумеется, дело вкуса, но я нахожу это очень полезным.).
Итак, с двумя элементами мы разобрались. Но что делать с колонками?
Ширина основной колонки, которая расположена слева, составляет 566рх , ширина же левой колонки равна 331рх . Эти цифры нам тоже придется перевести в проценты. Но прежде чем подставить их в формулу, обратите внимание на то, что контекст изменился. Последний раз мы делили ширину модуля .blоg на 960 , ширину его контейнера ( #раgе ). Но поскольку эти блоки вложены в .blоg , нам нужно делить целевую ширину колонок ( 566 и 331 ) на ширину их нового контекста, то есть ширину .blоg ( 900 ). В результате мы получаем:
566 / 900 = 0,628888889.
331 / 900 = 0,367777778.
Передвинув запятую на два знака, мы получаем в итоге 62,8888889 % для блока . mаin и 36,7777778 % для блока .оthеr :
width: 62.8888889 %; /* 566рх / 900рх */
width: 36.7777778 %; /* 331рх / 900рх */
Вот мы и получили гибкий макет (рис. 2.17). При помощи небольших расчетов мы создали контейнер, выраженный в процентах, и две гибкие колонки, что дает нам макет, меняющий свои размеры в соответствии с размерами окна браузера. При этом ширина в пикселях тоже меняется, а пропорции дизайна остаются исходными.
Похожие публикации:
- Как сделать обводку текста в html css
- Как сделать отступ между строками в css
- Как сделать перенос в css
- Как сделать поисковую строку в html css
5. CSS – Относительные и абсолютные единицы измерения
Прежде чем перейти к практическим упражнения, мы бы хотели кратко рассказать о единицах измерения в CSS.
CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = «5px solid blue».
Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:
| Единица измерения | Описание | Пример |
| % | Устанавливает измерение в процентах относительно другого значения, как правило, охватывающего элемента. | div |
| cm | Определяет измерение в сантиметрах. | p |
| em | Относительное измерение высоты шрифта в em пространстве. Поскольку единица em эквивалентна размеру данного шрифта, то, если Вы укажите шрифт 12pt, каждый элемент «em» будет 12pt. Таким образом, 2em будет 24pt. | h1 |
| ex | Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x шрифта. | p |
| in | Определяет измерение в дюймах. | h2 |
| mm | Устанавливает измерение в миллиметрах. | div |
| pc | Определяет измерение в пиках. Пика эквивалентна 12 пунктам (12pt). | h3 |
| pt | Определяет измерение в типографских пунктах (твип), введённых компанией Adobe. Пункт равен 1/72 дюйма или 25,4/72 мм = 0,3528 мм. В странах СНГ, входящих в Таможенный союз, 1 пункт равен 0,376 мм. | table |
| px | Устанавливает измерение в пикселях экрана. | p |
| vh | Равен 1% высоты окна просмотра. | h1 |
| vw | Равен 1% ширины окна просмотра. | h2 |
| vmin | Равен 1vw или 1vh, в зависимости от того, что меньше. | div |
Оглавление
- 1. CSS – Самоучитель для начинающих
- 2. CSS – Введение
- 3. CSS – Селекторы
- 4. CSS – Подключение
- 5. CSS – Единицы измерения
- 6. CSS – Цвета