Использование единиц px, em, rem в CSS

Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.

Для начала нужно усвоить базовое понимание этих единиц:

• Px (пиксель) – это единица измерения величины объектов относительно размера экрана.
• Em – это единица, основанная на размере шрифта родительского элемента (в пикселях).
• Rem – это единица,основанная на размере шрифта корневого элемента html (в пикселях).

Мы можем использовать эти единицы в различных свойствах CSS, таких как font-size, padding, margin, position.

Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.

Пример:

div { font-size: 10px; padding: 10px; }

Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.

Единицы измерения em зависят от размера шрифта родительского элемента. Это не фиксированные единицы, поскольку они зависят от базового размера. Когда изменяется размер родительского элемента, меняется и значение em.

Пример:

div { font-size: 10px; padding: 10em; }

Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, поскольку размер берётся из свойства font-size. В нем каждое значение принимается за 1em, то есть (10px = 1em, поэтому 10em = 10px * 10 = 100px).

Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете изменить размер шрифта, используемый по умолчанию, в настройках браузера.

Пример:

Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.

div { font-size: 10px; padding: 10rem; }

Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.

Вопрос, который возникает при использовании этих единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem. Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?

• Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на сайте, там, где не нужно менять размеры. В этом случае “rem” предпочтительнее.
• Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля, применяйте “em”.

Для вложенных элементов используется только одна единица измерения – em. Если размеры шрифта или отступов дочернего элемента должны быть наполовину меньше, чем у родительского, тогда используйте em.

Пример:

div.parent { font-size: 10px; }
div.parent div. child { font-size: 0.5em; }

Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.

Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?

Пример:

div.parent { font-size: 10px; padding: 10em; margin: 10rem;}
div.parent div.child { font-size: 0.5em; padding: 10em; margin:10rem}

Для (div.parent)

• Размер шрифта = 10px.
• Внутренние поля с каждой стороны (10px = 1em, поэтому 10em * 10px) = 100px.
• Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.

Для (div.child)

• Размер шрифта (0.5em = 10px / 2) = 5px.
• Внутренние поля с каждой стороны (5px = 1em, поэтому 10em * 5px) = 50px.
• Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.

Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).

Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).

Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.

Чтобы преодолеть эту путаницу в единицах измерения, нужно знать, какие элементы зависят от настроек браузера, а какие основаны на размере экрана пользовательского устройства.

Данная публикация представляет собой перевод статьи «Use of px, em, rem units in css, which one I have to use and when?» , подготовленной дружной командой проекта Интернет-технологии.ру

EM, REM или PX – почему нельзя использовать «только пиксели»

От автора: споры ведутся уже давно – какие единицы измерения использовать в CSS? Мы, как и многие другие, сначала перешли на REM и потом вернулись к любимым пикселям. Мы просто потеряли тот след, почему мы перешли на REM единицы. Проблема связана не только с размером шрифта, но и с доступностью.

Если коротко:

пиксели – это каменный век, не используйте их;

используйте REM для размеров шрифтов и отступов;

используйте EM для медиа запросов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Пиксели

За все эти годы мы привыкли к пикселям (px). Все знают, что такое пиксель (хотя размер пикселя не всегда одинаковый, но это тема другой статьи). Всем удобно работать с пикселями, их легко переводить. Дизайнеры работают в пикселях, очень удобно брать размеры прямо из Photoshop и переносить их в верстку.

Так что же не так с пикселями?

Доступность

Я большой сторонник доступности в интернете.

Если вы указываете все шрифты, элементы и отступы в пикселях, вы не уважаете конечного пользователя.

В большинстве браузеров пользователь может сменить размер шрифта по умолчанию (обычно это 16px). Если пользователь указал размер шрифта по умолчанию 20px, все шрифты должны увеличиться пропорционально.

Однако если на сайте четко прописан размер шрифта в пикселях, то заголовок размером 30px всегда будет 30px. От дизайнера/разработчика это может звучать круто, но вы не обычный пользователь. Хватит делать сайты для себя.

Если задать размер шрифта в пикселях, это не убьет всю доступность. Пользователь может изменять масштаб с помощью CTRL+/- (на OSX вместо CTRL клавиша CMD). Но можно ведь сделать все лучше.

Единицы измерения REM

Если вы хоть как-то знакомы с миром веб-дизайна, вы точно слышали про единицы измерения REM. Если все же не знаете, REM – это способ указать размер шрифта на основе размера шрифта корневого HTML элемента. С их помощью также можно быстро изменить размеры во всем проекте, поменяв размер шрифта корневого элемента (например, под определенный медиа запрос/размер экрана).

«REM единицы представляют собой размер шрифта корневого элемента (например, размер шрифта тега ). Если использовать эти единицы измерения для указания размера шрифта корневого элемента, вы получите изначальное значение.»

Как перевести REM в PX

Стандартный пример: размер шрифта html задан в 10px, параграф задан в 1,6rem. 1,6rem*10px = 16px.

Самый распространенный сценарий, который я видел, это установка корневого размера шрифта в 10px с помощью REM. Это позволяет легко и быстро переводить одни значения в другие, просто поделив на 10.

Тем не менее, если задать базовый размер шрифта в пикселях, мы получим ту же проблему, что и в примере выше. Доступность.

У REM единиц есть свои способы применения, однако я готов поспорить, что большинство людей используют REM только потому, что они круче пикселей. Я почти не видел реальных проектов, где специально бы изменяли корневой размер шрифта под определенный размер экрана, и это нормально. Если ваш сайт не нагружен множеством шрифтов, вы вряд ли захотите масштабировать все и сразу.

Так как же нам не ломать доступность?

Задайте размер шрифта корневого HTML элемента в процентах. Проценты будут связаны с размером шрифта в браузере по умолчанию. Обычно ставят размер шрифта на 62,5%. 62,5% от 16px (стандартный размер шрифта по умолчанию) составляют 10px. То есть 1,6rem = 16px. Если пользователь поменяет размер шрифта по умолчанию, например, на 20px, то 1,6rem будут равны 20px. Если пользователь хочет шрифты еще больше, пусть ставит. Счастливый дизайнер, счастливый разработчик. Со всеми числами легко работать.

Идеальный вариант – оставить размер шрифта HTML на 100%, но тогда вычисления станут немного сложнее. Например, 16px будут равны 1rem, а 20px станут 1,25rem, 24px превратятся в 1,5rem и т.д.

Sass/SCSS в помощь

Вычислять все эти числа в голове довольно затруднительно и долго. К счастью, вам не следует беспокоиться, если вы используете один из CSS препроцессоров Sass/SCSS, LESS. Все цифры можно вычислять с помощью функций.

А что по поводу EM единиц измерения?

EM единицы работают почти так же, как REM, пока дело не касается вложенности. Мне никогда не нравились EM, особенно когда нужно задавать размер шрифта. Например, возьмем div с размером шрифта 2em, добавим параграф со шрифтом 2em. Размер параграфа теперь 2em относительно div. Я быстро сбиваюсь в вычислениях, где какой размер. Код быстро становится неудобным. Именно эту проблему решает REM – размер всегда привязывается к корневому элементу.

Что по поводу медиа запросов?

Итак, мы установили, что значения в пикселях переписывают значения браузера по умолчанию, поэтому лучший выход – перевести все пиксели в REM, верно? Не совсем.

В этой статье описываются ключевые различия в использовании пикселей, EM и REM в медиа запросах (//zellwk.com/blog/media-query-units/). Прочитайте ее и возвращайтесь.

В итоге, и пиксели и REM в медиа запросах проигрывают, когда необходимо изменить масштаб в некоторых браузерах. EM в таких случаях становится наилучшим вариантом. REM здесь проигрывают намного больше, чем пиксели, поэтому мы не будем их рассматривать.

Все становится немного сложнее. У EM и пикселей есть свои минусы с медиа запросами, когда дело касается различий значений с плавающей точкой. Если вы используете min и max медиа запросы в одном блоке кода, то вам придется попотеть, когда пользователь начнет менять масштаб браузера или размер шрифта по умолчанию.

Пара примеров:

Мы используем шесть цифр после точки, так как отдельные браузеры не видят разницы межу 2-5 цифрами после точки.

Пример 1: масштаб в браузере установлен в 100%, ширина окна 640px

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63. 999999em = Hit min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss

Пример 1б: масштаб в браузере установлен в 100%, ширина окна 639px

min-width: 64em = Miss max-width: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Hit max-width: 639.999999px = Hit

min-width: 64em = Miss max-width: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Hit max-width: 639.999999px = Hit

Нельзя использовать 6 цифр после точки для EM, это запускает оба медиа запроса. Пример 2: масштаб в браузере установлен в 110%, ширина окна 704px (так как 640px*110% = 704px)

min-width: 64em = Miss max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Miss max-width: 639. 999999px = Hit

min-width: 64em = Miss max-width: 63.99em = Miss max-width: 63.999999em = Hit min-width: 640px = Miss max-width: 639px = Miss max-width: 639.999999px = Hit

Пример 2б: масштаб в браузере установлен в 110%, ширина окна 705px

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Miss min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Miss min-width: 640px = Hit max-width: 639px = Miss max-width: 639.999999px = Miss

Мы не можем использовать две цифры после точки для EM. Нам осталось использовать 6dp. Это работает с зумом в браузерах. Однако… Пример 3: масштаб в браузере установлен в 100%, размер шрифта 20px, ширина окна 800 (640*125% = 800)

min-width: 64em = Hit max-width: 63. 99em = Miss max-width: 63.999999em = Hit

min-width: 64em = Hit max-width: 63.99em = Miss max-width: 63.999999em = Hit

И опять, 6dp для EM использовать нельзя. Нельзя использовать пиксели для медиа запросов, так как они запускают оба запроса 640px/639px, потому что игнорируются EM/REM.

Какой же выход?

К сожалению, ответа нет. Пока браузеры не решат проблемы с округлением, вы в западне. Простейший выход – не создавать min-width и max-width в одном блоке. Пример:

body { @media screen and (max-width: 63.99em) { background: blue; } @media screen and (min-width: 64em) { background: blue; } }

body { @media screen and (max-width: 63.99em) { background: blue; }   @media screen and (min-width: 64em) { background: blue; } }

Проблема с кодом выше заключается в том, что есть сценарии, когда будут запущены или проигнорированы оба медиа запроса.

Так что лучше всего писать что-то такое:

body { background: blue; @media screen and (min-width: 64em) { background: blue; } }

body { background: blue;   @media screen and (min-width: 64em) { background: blue; } }

Почему не существует реального решения? Мне кажется, люди особо об этом не думают. Любая статистика, где говорится, что люди не меняют размер шрифта в браузере по умолчанию, искажает правду. Опция по изменению размера шрифта в Chrome похоронена в продвинутых настройках.

Ловушки

У данного подхода есть несколько ловушек:

если вы привыкли писать min-width и max-width медиа запросы в одном блоке кода, то вам придется ждать еще дольше;

возрастает сложность, так как вам придется переписать CSS в одну из сторон, вместо того, чтобы просто сказать браузеру, чтобы тот использовал вариант А или B;

возрастает размер файла из-за перезаписей, несильно, но это стоит учесть.

В зависимости от проекта, кто его разрабатывает и таких факторов, как бюджет (нужно быть реалистами), пиксели будут намного проще и быстрее. Намного проще и быстрее игнорировать доступность.

Помните, для кого вы создаете сайты. Проблемы, затронутые в этом посте, актуальны на момент написания, однако постоянные обновления браузеров могут оставить их в прошлом.

Источник: //engageinteractive.co.uk/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Понимание em-значений в CSS — AlexdevAlexdev

Добрый день, уважаемые читатели!

Т.к. разработчики в основном используют пиксельные значения, я думаю, что многие их них до конца не понимают, что такое em и как оно работает в CSS. Я надеюсь, что данная статья послужит хорошим помощником для понимания работы emзначений.

 

 

 

em — определение, пожалуйста

Для em есть очень простое объяснение: Равно вычисленному значению «font-size» элемента, на котором оно используется. Другими словами, если у вас есть следующий CSSкод:

.element {
	font-size: 20px;
}

То это означает, что 1em определенный на элементе или на каком-либо дочернем элементе будет равен 20px.Если вы сделаете вот так:

.element {
	font-size: 20px;
	width: 4em;
	height: 4em;
}

То это будет означать, что width и height элемента (определенные, как 4em 4em) будут равны 80px и 80px (20px * 4 = 80px).

 

Подробней

Wikipedia говорит:

Em – это единица изменения, равная текущему указанному размеру шрифта. Название em связано с буквой «M». Изначально данная единица была получена из ширины заглавной буквы «М» при использовании определенного шрифта.

Хотя название изначально и было основано на ширине буквы М, сейчас это уже не имеет значения, так как на сегодня единица измерения em связана с точечным размером шрифта.

CSS-файле не бывает точного определения тому, что такое em. Значение данной единицы зависит от ваших каскадных таблиц стилей. Теоретически, если вы указали значение длины всех элементов на странице в единице измерения em, то изменения одного лишь размера шрифта может разрушить всю вашу разметку.

 

А что, если «font-size» не используется?

В примере выше я определял свойство font-size. Em далее получается из базового значения. Но что, если у элемента не определен параметр font-size?

В этом случае, так как значение font-size наследуется по всему дереву документа, значение em будет равно унаследованному значению font-size. Если нигде не было определено свойство font-size, то значение единичного em будет равно 16px, которое является значением по умолчанию (и я надеюсь, что оно одинаково во всех браузерах).

 

«rem» должен быть автоматическим для людей

Пришло время показать новое добавление в CSS3: единицу rem. Данная единица rem (название от «root em») поддерживается во всех современных браузерах: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.

В целом, rem единица очень проста для понимания. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном главном значении, указанном в <html>-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem.

И в случае, если вы не указали font-size для <html>, то по умолчанию root em будет равно 16px.

 

Carpe di-em

Проработав в web-дизайне и разработке много лет, мы, наконец, можем отказаться от фиксированной ширины и пикселозависимого дизайна. Хотя многие уже перешли на разработку адаптивных дизайнов, все время от времени используют пиксельные значения. Хотя этого может быть достаточно для элементов шаблона, мне кажется, что именно типографику стоит полностью переводить на значения em.

Несмотря на то, что мы можем создать целый шаблон с использованием единиц em, мне кажется, что в адаптивных шаблонах все равно лучше использовать пиксельные значения и процентное соотношение и, как уже было отмечено, для типографики использовать em.

Так что, если вы похожи на меня, выделите день — и начните использовать супер интуитивные EM и REM значения везде, где это практично и разумно.

 

Интересный перевод значений пикселей в em: http://www.jan-quickels.de/tools-web-typography/

 

Спасибо за внимание! Подписываемся на рассылку, ставим лайки, до следующей статьи 😉

 

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 02.05.2013

Единицы измерения и их обозначения – Андрей Шарапов

Измерительные единицы часто употребляются на web-страницах. Они могут быть как на самой HTML-страничке так и в Таблице стилей (CSS). Цифры всегда сопровождаются названием единиц измерения. Но если мы используем атрибут width, то можно не указывать единицу измерения, а просто написать числовое значение. Оно автоматически будет приниматься за логические точки экрана (пиксели). Все единицы измерения разные, их нужно писать слитно, не должно быть никаких пробелов, никакого расстояния между числом и единицей измерения.

Единицы измерения и их типы

Единицы, в вебе, делятся на 2 типа: абсолютные и относительные. На всех сайтах используются единицы измерения. Без них невозможно.

Относительные:

em

em (высота шрифта данного элемента) или текущий размер шрифта. Размеры в em – относительные, они определяются по текущему контексту.
Пример:

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая. Выходит, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

ex

ex (высота буквы «X» в данном шрифте)

px

px (пиксель, pixel) – логическая точка экрана. Пиксель px – это самая базовая, абсолютная и окончательная единица измерения. Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели. Пиксели могут быть дробными, например размер можно задать в 16. 5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333…px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

%

% (процент) – значения, зависимые от определенной среды, например, от ширины экрана.
Какие единицы измерения использовать решает разработчик. Лично я в своей практики использую в основном пиксели и проценты, а для обозначения межстрочного расстояния em. Вам тоже рекомендую придерживаться такой схемы. Остальные значения могут пригодиться в специфических случаях (например, если вы делаете реалистичную линейку на сайте и т.д.).

rem

rem — смесь px и em. Единица rem задаёт размер относительно размера шрифта элемента <html>. Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по-умолчанию, который мы, конечно, можем переопределить и использовать rem для задания шрифтов внутри относительно него: Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.

Единица rem не поддерживается в IE8-.

Мобильные шрифты

Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:

1. vw – 1% ширины окна
2. vh – 1% высоты окна
3. vmin – наименьшее из (vw, vh), в IE9 обозначается vm
4. vmax – наибольшее из (vw, vh)

Эти значения были созданы, в первую очередь, для поддержки мобильных устройств. Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна. Вы сможете легко увидеть, как работает vh, если поменяете размер окна браузера. Текст выше будет расти/уменьшаться.

Абсолютные

Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории и поскольку браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
in (дюйм, inch), 1in = 25,4mm
mm (миллиметр)
cm (сантиметр)
pt (точка, point), 72pt = 1in
pc (пика), 1pc = 12pt

Воспользуйтесь таблицей сравнения значений, чтобы правильно применить их на своем сайте.

Возможно Вас также заинтересует…

Front-end шпаргалка: единицы измерения | GeekBrains

Разобрали, какие бывают единицы измерения в шрифтах и что лучше использовать.

https://d2xzmw6cctk25h.cloudfront.net/post/1525/og_cover_image/aeaaadfeb1536a4a72aec17b0110f2c1

Для каждой ситуации в верстке лучше использовать подходящие единицы измерения. Верстать только в пикселях значит не учитывать адаптивность. Применять только проценты — делать макет с зависимыми друг от друга блоками. Не использовать rem — переписывать весь код, если заказчик попросит сделать «покрупнее». В верстке десятки единиц измерения и лучше сочетать их, чтобы облегчить работу себе и добиться лучших результатов.

Абсолютные единицы

Измеряются в точных (абсолютных) значениях:

• Дюйм — in (inch).
• Пика — pc (pica).
• Поинт — pt (point).
• Сантиметр — cm (centimeter).
• Миллиметр — mm (millimeter).
• Пиксель — px (pixel).

Дюйм пришел из английской системы мер, пика и поинт — из типографики, сантиметр и миллиметр — из метрической системы мер. И только пиксель пришел из веба. Однако размер пикселя, который используется в верстке, отличается от обычного.

1in = 6pc = 72pt = 96px

1pc = 12pt = 16px

1pt = 4/3px

1cm = 10mm = 37,8px

1mm = 3,78px

1px = 1/96in

Посмотрите, как выглядит текст в разных абсолютных единицах измерений.

На практике обычно используются пиксели, другие единицы измерений — крайне редко. Например, сантиметр и миллиметр понадобятся, если на сайте есть элемент, который должен распечатываться в строгом размере: бейдж для выставки или почтовый адрес, который вкладывают в карман конверта. Подобные задачи могут встретиться пару раз в жизни.

Относительные единицы

Процент берется от различных свойств. 1% всегда равен 1/100 родительского элемента.

Viewport — область просмотра, т.е. та часть окна браузера, которая доступна пользователю. У браузера есть техническая часть: адресная строка, открытые вкладки, виджеты — они не входят. Но в viewport входят полосы прокрутки.

1vw  = 1/100 ширины окна браузера

1vh = 1/100 высоты окна браузера

1vmin = меньшее из значений 1vw и 1vh.

1vmax = большее из значений 1vw и 1vh

Поддерживается не всеми браузерами. Проверяйте с помощью ресурса Can I Use.

Иногда возникает путаница при выборе «проценты или viewport». Размер в процентах будет считаться от размера контейнера, а viewport — от области просмотра экрана. Допустим, вы установили значение 10vw. Тогда на экране с шириной 800px размер составит 80px.

Размер viewport	1vw	2vw	3vw	4vw	5vw
Размер шрифта в пикселях
400px	4px	8px	12px	16px	20px
500px	5px	10px	15px	20px	25px
600px	6px	12px	18px	24px	30px
700px	7px	14px	21px	28px	35px
800px	8px	16px	24px	32px	40px
900px	9px	18px	27px	36px	45px
1000px	10px	20px	30px	40px	50px
1100px	11px	22px	33px	44px	55px
1200px	12px	24px	36px	48px	60px

Viewport помогает добиться масштабируемости текста. Чем больше экран, тем более крупный шрифт будет показываться. Однако может случиться ситуация, когда шрифт станет слишком мелким и нечитаемым. Чтобы этого избежать, применяйте функцию calc (). Поставьте базовый размер шрифта, допустим, 12px, и добавьте значение vw:

calc (12px+0.5vw)

Тогда текст станет более динамичным и предсказуемым. Если не хотите использовать calc, работайте с препроцессорами.

Шрифтозависимые единицы

1em = размер родительского элемента

1rem = размер шрифта корневого элемента

1ex = высота символа X

1ch = ширина символа 0

Единицы измерения привязаны к шрифту. Они помогают связать размер шрифта с размерами блоков и отступов. При смене семейства шрифта размеры, установленные через ex и ch, меняются. На практике ex и ch используются редко. Основные используемые единицы — em и rem. Если em не задан, берется значения по умолчанию, установленное в большинстве браузеров — 16px. Единица rem считается от базового значения, а em — от родителя.

Использование rem помогает изменять шрифт всего сайта. Это очень удобно при верстке адаптивных страниц. Задавайте размеры шрифта для каждого устройства отдельно. Например, десктоп-версия — 16px, планшеты — 12px, смартфоны — 10px. На экране устройства шрифт будет отображаться в зависимости от присвоенного значения.

На примере шрифт для сайта задан 16px. Это и есть заданное значение rem для сайта. Дополнительно прописали значение rem для экранов маленьких размеров шириной до 400px — 10px. Таким образом, на десктопах шрифт будет 16px, а на мобильных устройствах — 10px. Ширина экрана изменялась, автоматически поменялся шрифт на всем сайте.

Единица em работает иначе и зависит от родителя. Поэтому на разных участках кода она принимает разные значения. Есть отличный пример для иллюстрации. Допустим, мы задаем нижние отступы относительно размера текста в блоке через em. В обоих случаях, и в заголовке и абзаце, отступ равен 1em. Но в заголовке em = 32px, потому что font-size родителя 32px, а в абзаце — 16px, и здесь размер шрифта — 16px.

Еще пример. Мы задали отдельный класс для родительского блока. Теперь размер зависит только от него, а не от размера шрифта всего документа.

Используйте em и rem, когда дизайн построен на точных пропорциях и важны размеры отступов, блоков и шрифтов. Если сверстать полностью на em и rem, изменение размера шрифта автоматически пропорционально скорректирует остальные элементы. Дизайн останется гармоничным, а вам нужно будет поменять только одну строчку кода.

Что использовать?

Выбор единиц зависит от задач проекта, поэтому принимайте отдельное решение в каждом конкретном случае. На ресурсах, откуда пользователи распечатывают материалы, используйте pt или pc. Если при печати нужны точные размеры, задавайте cm и mm. Для пропорциональных дизайнов, привязанных к размерам друг друга, берите em и rem. Для мультимедийных и резиновых форматов задавайте в процентах или через viewport.

Основное правило — подбирайте единицы измерения, наиболее простые в поддержке данного проекта.

Запомнить

1. Абсолютные единицы измерения, кроме пикселя, применяются крайне редко. Размер пикселя в верстке отличается от пикселя экрана и составляет 1/96 дюйма.
2. Относительные единицы измерения не имеют точных размеров и зависят от других значений. Проценты используйте, когда нужно задать размеры относительно родительского контейнера. Viewport помогает задать размер относительно видимой области экрана.
3. Viewport широко используется в отзывчивой типографике для масштабируемости текста. Когда вы хотите ограничить масштабируемость, применяйте функцию calc (). Задавайте фиксированный размер шрифта и добавляйте к нему изменяемый параметр vw.
4. Среди шрифтозависимых единиц обычно используют em и rem. Если размер шрифта не задан, em будет равен 16px, потому что именно этот размер установлен по умолчанию в большинстве браузеров.
5. Для верстки дизайн-макетов со строгими пропорциями применяйте em и rem. Тогда при внесении изменений в макет и выборе другого размера шрифта вам будет нужно только прописать новый шрифт. Остальной дизайн пропорционально перестроится под новые параметры и будет снова выглядеть гармонично.
6. При выборе единиц измерения принимайте решение в каждом конкретном случае. Основывайтесь на простоте применения и дальнейшей поддержки.

Единицы «em» в CSS

Ввиду распространенной привычки среди разработчиков использовать пиксельные значения, нам кажется, не все понимают настоящего предназначения параметров em, и того, как они работают в CSS.

Составляя некоторые руководства, нам так или иначе приходилось сталкиваться с этими значения, так что, сегодня нам есть что вам рассказать. Надеемся, что наше сегодняшнее руководство поможет вам отодвинуть занавес, накрывший столь удобную и продуманную технику, предназначенную для разработки веб-проектов.

Определение em:

Значение равное вычисленному значению параметра font-size, примененного к элементу.

Другими словами, если у нас будет следующий код CSS:

. element {
font-size: 20px;
}

Это означает, что 1em, установленное в том элементе или в любом из его дочерних элементах, будет равное 20 пикселям. Если вы используете следующий код:

{
.element { font-size: 20px; 
width: 4em; 
height: 4em; 
}

Это означает, что ширины и высота элемента (указанные здесь как 4em x 4em) будут составлять 80px x 80px (20px * 4 = 80 px).

подробнее:
Em – это единица изменения в типографии, равное текущему указанному размеру шрифта. Название em связано с буквой M. Изначально данная единица была получена из ширины заглавной буквы М при использовании определенного шрифта

Документация продолжена объяснением того, что, хотя название изначально и было основано на ширине буквы М, сейчас это уже не имеет значения. Так как на сегодняшний день единица измерения em связана с точечным размером шрифта.

Используя данный метод вычисления, в CSS-файле не бывает точного определения тому, что есть такое em. Значение данной единицы зависит от того, как составлены ваши каскадные таблицы стилей. Теоретически, если вы указали значение длины всех элементов в единице измерения em, то изменения одного лишь размера шрифта будет достаточно, чтобы «уничтожить» всю вашу точную до пикселя разметку.

А что если я не использую параметр font-size?

В примере, приведенном выше, и в JSBin, на который мы сослались, точно указан параметр font-size. Единица em впоследствии выводится из параметра «base». Но что если в элементе не указан точный параметр font-size?

В таком случае, так как параметр font-size наследуется по всему древу документа, значение единицы em будет выведен из того параметра, который был унаследован. Если во всем документе ни разу не упоминается параметр font-size, то значение отдельной единицы em будет равным 16 пикселям, что является значением по умолчанию (и нам кажется, что это не различается во всех браузерах).

«rem» должен быть автоматическим для людей

Пришло время привлечь и новое добавление в CSS: единицу rem. Данная единица (название получено от «root em») отлично поддерживается во всех браузерах: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.

В целом, данная единица очень проста к пониманию. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном «главном» значении, указанном в «html»-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem, например:

html { font-size: 62.5%; }
 body { font-size: 1.4rem; } /* =14px */
 h2 { font-size: 2.4rem; } /* =24px */

И, как и в случае с em, если вы не указываете значение font-size в «html»-элементе, то «главная» единица (root em) будет равна 16 пикселям по умолчанию.

Carpe di-em

Можно выдумать еще целую кучу выражений с em 🙂

Проработав в разработке веб-сайтов множество лет, мы наконец-то можем отказаться от фиксированных значений ширины. Хотя многие уже перешли на разработку адаптивного дизайна, все по-прежнему время от времени используют пиксельные значения. Хотя этого может быть достаточно для элементов шаблона, нам кажется, что именно типографику стоит полностью переводить на значения em.

Несмотря на то, что мы можем создать целый шаблон с использованием единиц em, нам кажется, что в адаптивных шаблонах все равно лучше использовать пиксельные значения и процентное соотношение и, как уже было отмечено, для типографики использовать em.

Вконтакте

Одноклассники

Мой мир

Facebook

E-mail

em, px, pt, cm, дюйм…

См. Также указатель всех советов.

На этой странице:

em , px , pt , cm , дюйм …

CSS предлагает несколько различных единиц для выражения длины. Некоторые из них имеют свою историю в типографике, такие как point ( pt ) и pica ( pc ), другие известны из повседневное использование, например, сантиметр ( см, ) и дюйм ( из ). А еще есть «магический» юнит, который был придумано специально для CSS: пикселей . Это значит для разных свойств нужны разные блоки?

Нет, блоки не имеют ничего общего с недвижимостью, но все с носителем вывода: экран или бумага.

Нет ограничений на то, какие единицы могут быть использованы где. Если свойство принимает значение в пикселей (поле : 5px ) также принимает значение в дюймах или сантиметрах ( маржа: 1.2 дюйма; поля: 0,5см ) и наоборот.

Но в целом вы бы использовали другой набор единиц для отображать на экране, чем при печати на бумаге. Следующая таблица дает рекомендуемое использование:

	Рекомендуется	Периодическое использование	Не рекомендуется
Экран	em, пикс,%	пр.	pt, cm, mm, in, pc
Печать	em, см, мм, дюйм, пт, шт,%	пикс, бывш.

Соотношение между абсолютными единицами измерения следующее: 1 дюйм = 2.54 см = 25,4 мм = 72 точки = 6 шт.

Если у вас под рукой есть линейка, вы можете проверить точность вашего устройства. это: вот коробка высотой 1 дюйм (2,54 см): ↑
72pt
↓

Так называемые абсолютные единиц ( см , мм , в , pt и pc ) в CSS означают то же самое, что и везде, , но только если ваше устройство вывода имеет достаточно высокое разрешение. на лазерный принтер, 1 см должен быть ровно 1 сантиметр.Но на устройства с низким разрешением, такие как экраны компьютеров, CSS не требуют этого. И действительно, результат имеет тенденцию отличаться от одного устройство к другому и от одной реализации CSS к другой. Это лучше зарезервировать эти блоки для устройств с высоким разрешением и в особенно для печатной продукции. На экранах компьютеров и портативных устройств, вы, вероятно, не получите того, чего ожидаете.

В прошлом CSS требовал, чтобы реализации отображали абсолютные единицы правильно даже на экранах компьютеров.Но как количество неправильных реализаций больше, чем правильных, и ситуация не улучшилась, CSS отказался от этого требования в 2011 году. В настоящее время абсолютные единицы должны корректно работать только на печатная продукция и на устройствах с высоким разрешением.

CSS не определяет, что означает «высокое разрешение». Но как бюджетный принтеры в настоящее время начинаются с 300 точек на дюйм, а экраны высокого класса — с 200dpi, обрезка, вероятно, находится где-то посередине.

Есть еще одна причина избегать использования абсолютных единиц для других целей. чем печатать: вы смотрите на разные экраны с разного расстояния. 1 см на экране рабочего стола выглядит маленьким. Но то же самое на мобильном телефоне прямо на ваших глазах выглядит большим. Лучше использовать относительные единицы, например em .

Блоки em и ex зависят от шрифт и может быть разным для каждого элемента в документе. В em — это просто размер шрифта. В элементе с 2-дюймовым font, 1em, таким образом, означает 2in. Выражение размеров, таких как поля и paddings, в em означает, что они связаны со шрифтом size, и если у пользователя большой шрифт (например,г., на большом экране) или мелкий шрифт (например, на портативном устройстве), размеры будут в пропорция. Объявления, такие как text-indent: 1.5em и margin: 1em чрезвычайно распространены в CSS.

Блок ex используется редко. Его цель — выразить размеры, которые должны быть связаны с x-высотой шрифта. В x-height — это примерно высота строчных букв, таких как a, c, m, или o. шрифтов одинакового размера (и таким образом, тот же em ) может сильно отличаться по размеру их строчные буквы, и когда важно, чтобы какое-то изображение, е.g., соответствует высоте x, блок ex соответствует имеется в наличии.

Блок пикселей — это волшебная единица CSS. Нет, это не так связаны с текущим шрифтом и обычно не связаны с физическим сантиметры или дюймы тоже. Определен блок пикселей быть маленьким, но видимым и таким, чтобы горизонтальная линия шириной 1 пиксель может отображаться с резкими краями (без сглаживания). Что такое резкий, мелкий и видимый, зависит от устройства и его формы используется: вы держите его близко к глазам, как мобильный телефон, на длина вытянутой руки, как монитор компьютера, или где-то посередине, например читалка электронных книг? Таким образом, пикселей не определяется как постоянной длины, но как то, что зависит от типа устройство и его типичное использование.

Чтобы составить представление о внешнем виде px , представьте компьютерный монитор с ЭЛТ 1990-х годов: самая маленькая точка, которую он может дисплей измеряет около 1/100 дюйма (0,25 мм) или немного Больше. Блок пикселей получил свое название от этого экрана. пикселей.

В настоящее время существуют устройства, которые в принципе могут отображать более мелкие острые точки (хотя вам может потребоваться лупа, чтобы увидеть их). Но документы прошлого века, которые использовали пикселей в CSS, по-прежнему выглядят одинаково, независимо от устройства.В частности, принтеры могут отображать четкие линии с гораздо меньшим детали, чем 1px, но даже на принтерах линия 1px выглядит очень так же, как это выглядело бы на мониторе компьютера. Смена устройств, но пикселей всегда имеет одинаковый внешний вид.

Фактически, CSS требует, чтобы 1px было точно 1/96 дюйма на всей распечатанной продукции. CSS считает, что принтеры, в отличие от экранов, не должны иметь разные размеры для пикселей для печати четких линий.В печатных СМИ px, таким образом, не только имеет одинаковый внешний вид с одного устройства на другой, но на самом деле он в меру то же самое.

CSS также определяет, что растровые изображения (например, фотографии) по умолчанию, отображается с отображением одного пикселя изображения на 1 пиксель. Фото с разрешением 600 на 400 пикселей будет 600 пикселей в ширину и 400 пикселей в высоту. В пиксели на фотографии, таким образом, не сопоставляются с пикселями устройства отображения (который может быть очень маленьким), но сопоставьте с пикселей единиц.Что позволяет точно совместить изображения с другими элементами документ, если вы используете в своем стиле пикселей единиц лист, а не пт , см и т. д.

Используйте em или пикселей для размера шрифта

CSS унаследовал от типографики единицы pt (point) и pc (pica). Принтеры традиционно использовали те и аналогичные агрегаты вместо см или в .В CSS нет причин использовать pt , используйте любую единицу, которую вы предпочитаете. Но там это хороший причина использовать ни pt , ни какой-либо другой абсолютный unit и используйте только em и px .

Вот несколько линий разной толщины. Некоторые или все они могут выглядеть резкими, но по крайней мере линии 1 и 2 пикселя должны быть резкие и заметные:

0.5pt, 1px, 1pt, 1,5 пикс., 2 пикс.

Если первые четыре строки выглядят одинаково (или если 0.Линия 5pt отсутствует), вы, вероятно, смотрите на монитор компьютера, не может отображать точки меньше 1 пикселя. Если линии появляются увеличивая толщину, вы, вероятно, смотрите на эту страницу на качественный компьютерный экран или на бумаге. И если 1pt выглядит толще чем 1. 5px, вероятно, у вас портативный экран.

Волшебная единица CSS, пикселей , часто бывает хорошей единицы измерения, особенно если стиль требует выравнивания текста по изображения или просто потому, что все, что имеет ширину 1 пиксель или кратное 1px гарантированно будет выглядеть резким.

Но для размеров шрифта еще лучше использовать em . Идея состоит в том, чтобы (1) не устанавливать размер шрифта элемента BODY (в HTML), но используйте размер устройства по умолчанию, потому что это размер, удобный для чтения; и (2) экспресс-шрифт размеры остальных элементов в em : h2 {font-size: 2.5em} , чтобы h2 в 2,5 раза больше обычного, body шрифт.

Единственное место, где вы можете использовать pt (или см или в ) для установки размера шрифта, находится в таблицы стилей для печати, если вам нужно убедиться, что напечатанный шрифт точно определенного размера. Но даже там, используя размер шрифта по умолчанию обычно лучше.

Таким образом, блок пикселей защищает вас от необходимости знать разрешение устройства. Будет ли выход 96 точек на дюйм, 100dpi, 220dpi или 1800dpi, длина, выраженная целым числом пикселей всегда выглядит хорошо и очень похоже на всех устройств. Но что, если вы до хотите узнать разрешение устройства, например, чтобы узнать, безопасно ли использовать 0.Линия 5px ? Ответ — проверить разрешение через Media Queries. Объяснение медиа-запросов выходит за рамки этой статьи, но вот небольшой пример:

div.mybox {border: 2px solid}
@media (минимальное разрешение: 2dppx) {
  / * Медиа с 2 или более точками на пиксель * /
  div.mybox {border: 1.5px solid}
}
 

Больше единиц в CSS

Чтобы еще проще было писать правила стиля, которые зависят только от размер шрифта по умолчанию, CSS с 2013 года имеет новую единицу: rem . rem (от «root em») — это шрифт размер корневого элемента документа. В отличие от em , который может быть разным для каждого элемента, rem постоянен во всем документе. Например, дать P и элементы h2 на том же левом поле, сравните этот стиль до 2013 года. простынь:

 p {margin-left: 1em}
h2 {размер шрифта: 3em; margin-left: 0,333em} 

с новой версией:

 p {margin-left: 1rem}
h2 {размер шрифта: 3em; margin-left: 1rem} 

Другие новые блоки позволяют указывать размеры относительно окно читателя.Это vw и vh . vw составляет 1/100 ширины окна а vh составляет 1/100 высоты окна. Там также vmin , что означает, какой самый маленький из vw и vh . И vmax . (Вы можете догадаться, что он делает.)

Поскольку они такие новые, они еще не везде работают. Но на начало 2015 года их поддерживают несколько браузеров.

em, px, pt, cm, in…

языков

Ceci est une traduction.Elle Peut Avoir des Erreurs ou être dépassée par rapport à la english version. Traducteur (-trice): Лоран Карконе

Voir également l’index de tous les trucs et уловки.

Dans cette page:

em , px , pt , cm , дюйм …

CSS предлагает различные единицы измерения размеров. Certaines proviennent de la typographie, com le point ( pt ) et le pica ( pc ), d’autres sont connues pour leur usage quotidien, com le centimètre ( см ) et le pouce ( в ).Et il y a également une unité «Волшебное» изобретение для CSS: пиксель пикселей . Est-ce que cela signifie que différentes propriétés nécessitent différentes unités?

Non, les unités n’ont rien à voir avec les propriétés, mais avec le média de sortie: écran ou papier.

У меня нет ограничений на использование телефона по телефону или телефону. эндройт. Собственный доступ к ценным бумагам на пикселей (‘margin: 5px’) elle accept également une valeur en pouces ou en centimètres (‘margin: 1.2 дюйма; маржа: 0,5 см ‘) и наоборот.

Mais généralement, vous utilisez un ensemble différent d’unités selon que vous affichez sur un écran ou que vous imprimez sur du папье. La table ci-dessous рекомендует различные способы использования:

	Рекомендовано	Случай использования	Не рекомендуется
Экран	em, пикс,%	пр.	pt, cm, mm, in, pc
Imprimante	em, см, мм, дюйм, пт, шт,%	пикс, бывш.

La Relations Entre les Unités Absolues est la suivante: 1in = 2. 54 см = 25,4 мм = 72 точки = 6 шт.

Si vous avez un double-décimètre, vous pouvez vérifier la précision de votre support de sortie: voici une boîte de 1in (2,54 см) Высокое качество: ↑
72pt
↓

Les unités appelées absolues ( см , мм , дюймов , pt и pc ) Signifient la même выбрал en CSS que partout ailleurs, mais uniquement si votre support de sortie a une résolution Assez élevée. Sur une imprimante laser, отклонение 1 см точность в 1 сантиметр. Mais pour des supports avec une basse résolution, com les écrans d’ordinateurs, CSS n’exige pas cela. Et Effement, le résultat тенденция à être différent d’un поддержка подлинной и единственной имплементации CSS в автономном режиме. Il est Preférable de réserver ces unités для опор высокое разрешение и особые возможности для поддержки впечатления. Sur les écrans d’ordinateurs ou de portables, vous n’obtiendrez вероятный проход к вам в присутствии.

Auparavant, CSS exigeait que les реализация affichent les unités absolues correctement, y included sur les écrans координаторов. Mais come le nombre d’implementations incorrectes dépassait le nombre d’implementations correctes et que cela n’allait pas en s’améliorant, CSS — это условие отказа. 2011. Aujourd’hui, les unités absolues doivent fonctionner Корректировка на вылетах, подписанных и на поддерживающих уникальность haute-résolution.

CSS ne définit pas ce que «haute-résolution» означает. Mais Начинается действие элемента вступления в силу. 300dpi et que les écrans haut de gamme atteignent 200dpi, la Ограничение вероятности входа 2.

Il y a une autre raison de ne pas работодатель les unités absolues pour des utilisations autres que l’impression: vous regardez des écrans différents à des distance différentes. 1cm sur un écran d’une station de travail apparaît petit.Mais le même sur un мобильный телефон с телефоном прямо в лицо, которое вы видите на своем устройстве. Il est preférable d’utiliser des unités Родственники à la place, по на .

Les unités em et ex dependent de la Police de caractères et peuvent être différentes pour chaque élément du document. L’unité em est simplement la taille de la police de caractères. Вылейте элемент из полиции est de taille 2in, 1em signifie donc 2in.Exprimer des tailles, Com les margins et les paddings , en em signifie qu’elles sont Родственники à la taille de la Police, et si l’utilisateur a une large police de caractères (sur un grand écran par instance) ou au contraire une petite police (sur un смартфон), les tailles seront пропорционально. Les déclarations telles que text-indent: 1.5em et margin: 1em sont très courantes en CSS.

L’unité ex est redument utilisée.Сын, но есть d’exprimer des tailles родственники à l’x-height de la полиция. Le x-height est, schématiquement, la hauteur des плюс petites lettrescom le a, c, m, ou o. Les polices qui ont la même taille (donc le même em ) peuvent varier considérablement Concerant la taille de leurs plus petites lettres, et lorsqu’il est important que surees изображения par instance aient le même x-height, l’unité ex est доступный.

Единица пикселей — волшебное единство в CSS. Elle n’est Pas relative a la police courante ni relative aux unités absolues. L’unité px est définie pour être ‘petite mais visible ‘, et de telle façon qu’une ligne Horizontale de 1px de largeur peut être affichée de façon nette, sans ‘arête’ (ni сглаживание). Ce qui est net, petit et visible dépend du support et de la façon dont il est utilisé: est-ce que vous le tenez près des yeux, come un téléphone mobile, à la distance d’un bras, com un écran d’ordinateur, ou à une distance intermédiaire, com une лизеза? Le px n’est donc pas defini com une longueur constante, maiscom quelque выбрал qui dépend du type de matériel et de son usage spécifique.

Залейте образ жизни px , prenez un écran cathodique des années 90: le plus petit point qu’il peut Более точные размеры окружающей среды 1/100 дюйма (0,25 мм) или плюс. Единица пикселей шин с именами пикселей.

De nos jours, il y a des support qui peuvent en principe afficher des points nets plus petits (bien que vous puissiez авуир besoin d’une loupe pour les voir). Mais les documents du siècle Это используется для пикселей в CSS sont rendus de la même façon, quelque soit le support.Les imprimantes en особый успех afficher des lignes très nettes avec des détails bien inférieurs à 1px, mais même sur les imprimantes, une ligne de 1px est rendue de la même façon qu’elle l’aurait été sur un écran d’ordinateur. Les поддерживает изменения, более пикселей и более подробную информацию.

En fait, CSS Requiert que 1px soit exactement 1 / 96e de pouce sur toutes les sortie imprimées. CSS considère que les imprimantes, contrairement aux écrans, n’ont pas besoin d’avoir différentes tailles для px для полного en mesure d’imprimer des lignes nettes.Dans un média imprimé, un px, — без присмотра за моей одеждой. d’un média à un autre, mais il est en plus de la même taille (de la même manière que pour cm , pt , мм , дюйм и шт. , комм. объяснение ci-dessus).

CSS определяет размер матричных изображений (ком. фотографии) sont affichées par défaut avec 1 pixel d’image соответствует 1px. Аинси, фотография с разрешением 600 x 400 аура 600 пикселей от большого и 400 пикселей от высокого.Les pixel de la photo ne Соответствующий Donc Pas Aux Pixels Du Support de Sorté (lequel peut être très petit), главный корреспондент дополнительных номеров пикселей . Cela rend possible le fait d’aligner exactement des images avec d’autres éléments du document, tant que vous utilisez l’unité px dans votre feuille de style, et non pt , см и др.

Utiliser на или пикселей для файлов хвосты полиции

CSS и типографика единиц pt (точка) эт шт (пика).Les imprimantes les ont традиционные элементы (ainsi que les unités similaires) де цена см или дюйм . Dans CSS il n’y aucune raison d’utiliser pt , utilisez l’unité que vous préférez. Mais il y a une bonne raison de ne pas utiliser pt ni aucune autre unité absolue et d’utiliser seulement em et px .

Voici quelques lignes de différentes épaisseurs. Toutes ou partie peuvent être nettes (mais au minimum les lignes 1px et 2px doivent être visibles et nettes):

0.5pt, 1px, 1pt, 1,5 пикс., 2 пикс.

Si les 4 premières lignes apparaissent identity (ou si la ligne 0.5pt n’est pas affichée), vous avez probablement un écran qui ne peut afficher des points inférieurs à 1px. Si les lignes semblent de plus en plus épaisses, vous regardez вероятно cette page sur un écran en haute résolution ou sur du papier. Et si 1pt semble plus épais que 1.5px, vous avez вероятно un смартфон.

L’unité magique en CSS, le px , est souvent très Адаптация, в частности, строгий стиль, обязательное согласование Текст на изображениях, ou tout simplement parce que tout ce qui a Un largeur de 1px ou d’un multiple de 1px est assuré d’avoir un rendu net.

Mais pour les tailles de police, il est preférable d’utiliser выс. М. . L’idée est (1) de ne pas spécifier la taille de la Police de l’élément BODY (en HTML), mais d’utiliser la taille par défaut du support, parce que c’est une taille que l’utilisateur комфортные условия жизни; (2) exrimer les tailles de police des autres éléments en em : ‘h2 {font-size: 2.5em}’ залить rendre le h2 2½ fois plus grand que le contenu normal du corps du документ.

Le seul endroit ou vous pourriez utiliser pt (ou cm or in ) pour définir une taille de Police est dans une feuille de style pour l’impression, si vous voulez être sûr que la police imprimée aura exactement une suree хвост. Mais même dans ce cas, utiliser la taille par défaut de la полиция есть общий элемент плюс индике.

L’unité px vous évite donc à devoir connaître la résolution du support.Que le sortie soit en 96dpi, 100dpi, 220 точек на дюйм или 1800 точек на дюйм, увеличенное изображение без размера от px sera toujours rendue correctement et de façon très similaire sur tous les опоры. Mais qu’en est-il si vous voulez vraiment connaître la résolution du support, par instance, Как насчет использования peut utiliser une ligne en 0.5px ? Ла ответ состоит из проверки разрешения на запросы СМИ. Expliquer Media Queries sort du cadre de cet article, néanmoins voici un petit example:

 дел.mybox {border: 2px solid}
@media (минимальное разрешение: 2dppx) {
  / * Медиа с 2 или более точками на пиксель * /
  div.mybox {border: 1.5px solid}
}
 

Nouvelles unités en CSS

Pour rendre encore plus facile le fait d’écrire des règles de style qui ne dependent que de la taille de la police par défaut, CSS: введение нового единого устройства 2013: Le rem . Le rem (залить «root em») est la taille de la Police de caractères dans l’élément racine du document.Contrairement au em , qui peut être différent pour chaque élément, le rem est constant tout au long du документ. Par example, pour définir la même marge gauche pour les элементы P et h2, comparez cette feuille de style antérieure à 2013:

 p {margin-left: 1em}
h2 {размер шрифта: 3em; margin-left: 0,333em} 

и новая версия:

 p {margin-left: 1rem}
h2 {размер шрифта: 3em; margin-left: 1rem} 

D’autres nouvelles unités rendent possible le fait de spécifier des tailles родственники à la fenêtre du lecteur, ce sont les unités vw и vh .Le VW Эквивалент на 1 / 100e большого размера и vh Эквивалент на 1 / 100e de sa hauteur. Или également vmin , qui sélectionne la plus petite valeur entre vw et vh . Et vmax . (vous devinerez ce qu’elle signifie.)

Comme elles sont récentes, elles ne fonctionnent pas enore часть. Mais en ce début 2015, plusieurs navigateurs les поддерживающее дежа.

Понимание единиц em в CSS

Из-за того, что разработчики обычно полагаются на значения пикселей, я думаю, что некоторые из нас могут не иметь полного представления о том, что такое em-единицы в CSS и как они работают.

Как и в случае со многими темами, о которых я пишу, я, вероятно, узнаю кое-что, пока пишу это. Так что я надеюсь, что это послужит хорошим обзором того, что такое единицы em и как вы можете использовать их в своих проектах.

Ач-эм — Пожалуйста, определение

Спецификация дает нам очень простое определение для единицы em:

Равно вычисленному значению свойства font-size элемента, в котором оно используется.

Другими словами, если у вас есть следующий CSS:

.element {
  размер шрифта: 20 пикселей;
}
 

Тогда это означает, что 1em , определенное для этого элемента или любого из его дочерних элементов, будет равно 20px.

Итак, если вы сделали это:

 .element {
  размер шрифта: 20 пикселей;
  ширина: 4em;
  высота: 4em;
}
 

Тогда это означает, что ширина и высота элемента (определяемого здесь как 4em x 4em ) будут равны 80px x 80px (20px * 4 = 80px).

Давайте подчеркнем это

Ключ к тому, чтобы запомнить это, основан на том, что такое настоящая единица «em» и откуда она взялась.Согласно статье Википедии о em:

em — это единица измерения в области типографики, равная текущему заданному кеглю. Название em связано с M. Первоначально эта единица была образована от ширины заглавной буквы «M» в данном шрифте.

Далее в статье объясняется, что, хотя единица em изначально была основана на ширине буквы «M», это больше не так, и теперь единица em обычно относится к размеру шрифта в пунктах.

При таком методе расчета в файле CSS нет строгого определения того, что такое ’em’; все зависит от того, что еще происходит в вашей таблице стилей. Итак, теоретически, если вы объявили множество значений длины с помощью em для различных элементов на странице, изменение одного размера шрифта может испортить весь макет.

Что делать, если «font-size» не используется?

В приведенном выше примере я явно определяю размер шрифта. Единица em впоследствии выводится из этой «базовой» настройки.Но что, если у элемента нет указанного размера шрифта?

В этом случае, поскольку свойство font-size наследуется через дерево документа, значение единицы em будет производным от того, что фактически унаследовано. Если нигде в документе размер шрифта не указан, то значение одной единицы em будет равно 16 пикселей, что является значением по умолчанию (и я считаю, что это работает одинаково во всех браузерах).

«rem» должно быть автоматическим для людей

Сейчас самое время рассказать о новом дополнении CSS3: модуле rem.Модуль rem (или модуль root em) имеет неплохую поддержку браузерами: IE9 +, FF3.6 +, Chrome, Safari 5+ и Opera 11.6+.

Насколько я понимаю, модуль rem довольно прост. Он позволяет вам основывать ваши em-единицы на «корневой» единице, определенной в элементе . Таким образом, вы можете сходить с ума с настройками размера шрифта во всевозможных местах вашей таблицы стилей, и любые размеры, определенные с помощью ‘rem’, будут относиться к корневому модулю и не будут наследоваться от родительского элемента, как в случае с ‘ em ‘(который вы все еще можете использовать, позволяя создавать различные контексты корневого модуля, сохраняя при этом возможность ссылаться на корневой модуль).

И, как и в случае с em, если вы не определите значение font-size в элементе , то единицей измерения root em будет значение по умолчанию 16 пикселей.

Карпе ди-эм

Надоели каламбуры? Что ж, тоже плохо. 🙂

Проработав в области веб-дизайна и разработки около 12 лет, мне потребовалось время, чтобы освободиться от пиксельных дизайнов фиксированной ширины. Хотя я начал создавать адаптивные макеты, я все еще увлекаюсь пиксельными модулями.Хотя это может быть хорошо для элементов макета, я думаю, что для типографики лучше всего использовать em.

Хотя можно создать весь макет, используя только единицы em, я думаю, что для адаптивных макетов лучше всего использовать пиксели или проценты — и, как уже упоминалось, использовать em для типографики.

Так что, если вы похожи на меня, давайте поймать день и начнем использовать супер-интуитивно понятные em и rem везде, где это практично и разумно.

Если ты не можешь победить их — присоединяйся к ним

Да, и если кто-нибудь прокомментирует эту статью, вы должны добавить каламбур.:)

Лучшая цена ems unit — Выгодные предложения на ems unit от глобальных продавцов ems

Отличные новости !!! Вы попали в нужное место для установки ems. К настоящему времени вы уже знаете, что что бы вы ни искали, вы обязательно найдете это на AliExpress. У нас буквально тысячи отличных продуктов во всех товарных категориях. Ищете ли вы товары высокого класса или дешевые и недорогие оптовые закупки, мы гарантируем, что он есть на AliExpress.

Вы найдете официальные магазины торговых марок наряду с небольшими независимыми продавцами со скидками, каждый из которых предлагает быструю доставку и надежные, а также удобные и безопасные способы оплаты, независимо от того, сколько вы решите потратить.

AliExpress никогда не уступит по выбору, качеству и цене.Каждый день вы будете находить новые онлайн-предложения, скидки в магазинах и возможность сэкономить еще больше, собирая купоны. Но вам, возможно, придется действовать быстро, так как это лучшее подразделение ems в кратчайшие сроки станет одним из самых востребованных бестселлеров. Подумайте, как вам будут завидовать друзья, когда вы скажете им, что приобрели ems на AliExpress. Благодаря самым низким ценам в Интернете, дешевым тарифам на доставку и возможности получения на месте вы можете еще больше сэкономить.

Если вы все еще сомневаетесь в выборе устройства ems и думаете о выборе аналогичного товара, AliExpress — отличное место для сравнения цен и продавцов.Мы поможем вам решить, стоит ли доплачивать за высококлассную версию или вы получаете столь же выгодную сделку, приобретая более дешевую вещь. А если вы просто хотите побаловать себя и потратиться на самую дорогую версию, AliExpress всегда позаботится о том, чтобы вы могли получить лучшую цену за свои деньги, даже сообщая вам, когда вам будет лучше дождаться начала рекламной акции. и ожидаемая экономия.AliExpress гордится тем, что у вас всегда есть осознанный выбор при покупке в одном из сотен магазинов и продавцов на нашей платформе.Реальные покупатели оценивают качество обслуживания, цену и качество каждого магазина и продавца. Кроме того, вы можете узнать рейтинги магазина или отдельных продавцов, а также сравнить цены, доставку и скидки на один и тот же продукт, прочитав комментарии и отзывы, оставленные пользователями. Каждая покупка имеет звездный рейтинг и часто имеет комментарии, оставленные предыдущими клиентами, описывающими их опыт транзакций, поэтому вы можете покупать с уверенностью каждый раз. Короче говоря, вам не нужно верить нам на слово — просто слушайте миллионы наших довольных клиентов.

А если вы новичок на AliExpress, мы откроем вам секрет. Непосредственно перед тем, как вы нажмете «купить сейчас» в процессе транзакции, найдите время, чтобы проверить купоны — и вы сэкономите еще больше. Вы можете найти купоны магазина, купоны AliExpress или собирать купоны каждый день, играя в игры в приложении AliExpress. Вместе с бесплатной доставкой, которую предлагают большинство продавцов на нашем сайте, вы сможете приобрести ems unit по самой выгодной цене.

У нас всегда есть новейшие технологии, новейшие тенденции и самые обсуждаемые лейблы. На AliExpress отличное качество, цена и сервис всегда в стандартной комплектации. Начните самый лучший шоппинг прямо здесь.

Лучшее соотношение цены и качества ems tens unit — Выгодные предложения на ems tens unit от глобальных продавцов ems tens

Отличные новости !!! Вы находитесь в нужном месте для единицы десятков ems.К настоящему времени вы уже знаете, что что бы вы ни искали, вы обязательно найдете это на AliExpress. У нас буквально тысячи отличных продуктов во всех товарных категориях. Ищете ли вы товары высокого класса или дешевые и недорогие оптовые закупки, мы гарантируем, что он есть на AliExpress.

Вы найдете официальные магазины торговых марок наряду с небольшими независимыми продавцами со скидками, каждый из которых предлагает быструю доставку и надежные, а также удобные и безопасные способы оплаты, независимо от того, сколько вы решите потратить.

AliExpress никогда не уступит по выбору, качеству и цене. Каждый день вы будете находить новые онлайн-предложения, скидки в магазинах и возможность сэкономить еще больше, собирая купоны. Но вам, возможно, придется действовать быстро, так как этот топовый модуль ems tens в кратчайшие сроки станет одним из самых востребованных бестселлеров. Подумайте, как вам будут завидовать друзья, когда вы скажете им, что купили на AliExpress десятки ems.Благодаря самым низким ценам в Интернете, дешевым тарифам на доставку и возможности получения на месте вы можете еще больше сэкономить.

Если вы все еще сомневаетесь по поводу единицы десятков ems и думаете о выборе аналогичного товара, AliExpress — отличное место для сравнения цен и продавцов. Мы поможем вам решить, стоит ли доплачивать за высококлассную версию или вы получаете столь же выгодную сделку, приобретая более дешевую вещь.А если вы просто хотите побаловать себя и потратиться на самую дорогую версию, AliExpress всегда позаботится о том, чтобы вы могли получить лучшую цену за свои деньги, даже сообщая вам, когда вам будет лучше дождаться начала рекламной акции. и ожидаемая экономия.AliExpress гордится тем, что у вас всегда есть осознанный выбор при покупке в одном из сотен магазинов и продавцов на нашей платформе. Реальные покупатели оценивают качество обслуживания, цену и качество каждого магазина и продавца.Кроме того, вы можете узнать рейтинги магазина или отдельных продавцов, а также сравнить цены, доставку и скидки на один и тот же продукт, прочитав комментарии и отзывы, оставленные пользователями. Каждая покупка имеет звездный рейтинг и часто имеет комментарии, оставленные предыдущими клиентами, описывающими их опыт транзакций, поэтому вы можете покупать с уверенностью каждый раз. Короче говоря, вам не нужно верить нам на слово — просто слушайте миллионы наших довольных клиентов.

А если вы новичок на AliExpress, мы откроем вам секрет.Непосредственно перед тем, как вы нажмете «купить сейчас» в процессе транзакции, найдите время, чтобы проверить купоны — и вы сэкономите еще больше. Вы можете найти купоны магазина, купоны AliExpress или собирать купоны каждый день, играя в игры в приложении AliExpress. Вместе с бесплатной доставкой, которую предлагают большинство продавцов на нашем сайте, вы сможете приобрести ems tens unit по самой выгодной цене.

У нас всегда есть новейшие технологии, новейшие тенденции и самые обсуждаемые лейблы.На AliExpress отличное качество, цена и сервис всегда в стандартной комплектации. Начните самый лучший шоппинг прямо здесь.

Лучшая цена на устройство для стимуляции ems — Выгодные предложения на устройство для стимуляции ems от глобальных продавцов устройств для стимуляции ems

Отличные новости !!! Вы находитесь в нужном месте для установки стимуляции EMS.К настоящему времени вы уже знаете, что что бы вы ни искали, вы обязательно найдете это на AliExpress. У нас буквально тысячи отличных продуктов во всех товарных категориях. Ищете ли вы товары высокого класса или дешевые и недорогие оптовые закупки, мы гарантируем, что он есть на AliExpress.

Вы найдете официальные магазины торговых марок наряду с небольшими независимыми продавцами со скидками, каждый из которых предлагает быструю доставку и надежные, а также удобные и безопасные способы оплаты, независимо от того, сколько вы решите потратить.

AliExpress никогда не уступит по выбору, качеству и цене. Каждый день вы будете находить новые онлайн-предложения, скидки в магазинах и возможность сэкономить еще больше, собирая купоны. Но вам, возможно, придется действовать быстро, так как эта лучшая установка для стимуляции ems в кратчайшие сроки станет одним из самых востребованных бестселлеров. Подумайте, как вам будут завидовать друзья, когда вы скажете им, что приобрели устройство для стимуляции ЭМС на AliExpress.Благодаря самым низким ценам в Интернете, дешевым тарифам на доставку и возможности получения на месте вы можете еще больше сэкономить.

Если вы все еще не уверены в модуле стимуляции ems и думаете о выборе аналогичного товара, AliExpress — отличное место для сравнения цен и продавцов. Мы поможем вам решить, стоит ли доплачивать за высококлассную версию или вы получаете столь же выгодную сделку, приобретая более дешевую вещь.А если вы просто хотите побаловать себя и потратиться на самую дорогую версию, AliExpress всегда позаботится о том, чтобы вы могли получить лучшую цену за свои деньги, даже сообщая вам, когда вам будет лучше дождаться начала рекламной акции. и ожидаемая экономия.AliExpress гордится тем, что у вас всегда есть осознанный выбор при покупке в одном из сотен магазинов и продавцов на нашей платформе. Реальные покупатели оценивают качество обслуживания, цену и качество каждого магазина и продавца.Кроме того, вы можете узнать рейтинги магазина или отдельных продавцов, а также сравнить цены, доставку и скидки на один и тот же продукт, прочитав комментарии и отзывы, оставленные пользователями. Каждая покупка имеет звездный рейтинг и часто имеет комментарии, оставленные предыдущими клиентами, описывающими их опыт транзакций, поэтому вы можете покупать с уверенностью каждый раз. Короче говоря, вам не нужно верить нам на слово — просто слушайте миллионы наших довольных клиентов.

А если вы новичок на AliExpress, мы откроем вам секрет.Непосредственно перед тем, как вы нажмете «купить сейчас» в процессе транзакции, найдите время, чтобы проверить купоны — и вы сэкономите еще больше. Вы можете найти купоны магазина, купоны AliExpress или собирать купоны каждый день, играя в игры в приложении AliExpress. Вместе с бесплатной доставкой, которую предлагают большинство продавцов на нашем сайте, мы думаем, вы согласитесь, что вы получите ems стимулирование по самой выгодной цене.

У нас всегда есть новейшие технологии, новейшие тенденции и самые обсуждаемые лейблы.На AliExpress отличное качество, цена и сервис всегда в стандартной комплектации. Начните самый лучший шоппинг прямо здесь.

.