Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


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


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

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

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

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

PointsPixelsEmsПроценты
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em 245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

fortress-design.com

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 |

qaru.site

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

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

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

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

PointsPixelsEmsПроценты
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em 62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

www.fortress-design.com

Знакомство с единицами измерения 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

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

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

www.dejurka.ru


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



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!