Как перевести пиксели в проценты css

Преобразование points в pixels, ems или в проценты в CSS

Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты. Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.

Кстати, если в макете дизайна сайта, сделанного в Фотошопе, разрешение файла 72 точки на дюйм, то размер шрифта 12 пунктов в Фотошопе будет соответствовать 12 пикселям в каскадной таблице стилей CSS.

Таблица преобразования points в pixels, ems или проценты

PointsPixelsEmsПроценты

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.clientHeight; el.clientWidth;

(el является ссылкой на элемент)

Демо

Обратите внимание, что эти свойства были впервые введены в объектной модели MS IE DHTML. Совсем недавно они были стандартизированы в модуле просмотра CSSOM, рабочем проекте W3C от 22 февраля 2008 г.

Эти свойства получили широкую поддержку. Однако это возможно, чем старый браузер, не совместимый с MS, и не поддерживает их. В этих случаях вы можете использовать getComputedStyle:

function findSize(el, size) { /* size must be 'width' or ' height' */ return window.getComputedStyle ? getComputedStyle(el,null).getPropertyValue(size) : el['client'+size.substr(0,1).toUpperCase() + size.substr(1)] + 'px'; } findSize(el, 'width'); findSize(el, 'height');

Демо

Поддержка браузера getComputedStyle и clientHeight/clientWidth не менее:

| IE | Firefox | Chrome | Safari | Opera -----------------|----------------------------------------- getComputedStyle | 9 |

Преобразование points в pixels, ems или в проценты в CSS

Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты. Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.

Кстати, если в макете дизайна сайта, сделанного в Фотошопе, разрешение файла 72 точки на дюйм, то размер шрифта 12 пунктов в Фотошопе будет соответствовать 12 пикселям в каскадной таблице стилей CSS.

Таблица преобразования points в pixels, ems или проценты

PointsPixelsEmsПроценты

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.

.container { width: 60%; margin: 100px auto; background-color: #eaeaea; padding: 1%; height: 250px; font-family: Arial; text-align: center; } .main, .aside { line-height: 253px; } .main { width: 60%; height: 100%; float: left; background-color: #ccc; } .aside { width: 40%; height: 100%; background-color: #aaa; float: left; } 

Таким образом, мы получим следующий результат:

Так как процент тоже относительная единица измерения, с ним есть такая же проблема, как и с единицами измерения EM. Может быть сложно быстро сосчитать в уме, сколько процентов от 500px составит 15px. Это обычно происходит, когда мы переводим единицы измерения пиксели из фазы дизайна в веб-страницу. Есть два пути, которыми можно решить эту проблему: Вы можете традиционно считать с помощью калькулятора, или, если Вам удобно использовать предобработчик CSS, Вы можете использовать функцию percentage()из Sass.

Заключение 

Вокруг использования единиц измерения в веб-дизайне разворачивается много дискуссий. Но в идеале единица измерения пиксель должна быть использована, когда свойства по большей части должны быть точными, например, для установки значений размеров вертикального или горизонтального смещения для таких свойств, как border-radius и box-shadow, а единицу измерения EM, как рекомендовано W3C, лучше использовать для размера шрифта. Процент — идеальная единица измерения для использования в адаптивной разметке.

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

---

Смотрите также

• 
  Word как восстановить
• 
  Word 2013 как установить
• 
  Как включить автосохранение в word 2007
• 
  Как в html прописать favicon
• 
  Как в word вызвать линейку
• 
  Как добавить анимацию html
• 
  Как в css задать высоту блока
• 
  Как в таблице word поменять столбцы местами
• 
  Как изменить ширину строки в таблице word
• 
  Как объединить отдельные документы word в один документ
• 
  Как закрепить строку в word на каждой странице