Содержание

em, px, pt, cm, in…

См. также оглавление со всеми советами.

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

em, px, pt, cm, in…

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px. Значит ли это, что для разных свойств нужны разные единицы?

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

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

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

Ре­ко­мен­ду­ютсяМож­но ино­гдаНе ре­ко­мен­ду­ются
Экранem, px, %expt, cm, mm, in, pc
Печатьem, cm, mm, in, pt, pc, %px, ex

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑

72pt
↓

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

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

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

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

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие

text-indent: 1.5em и margin: 1em в CSS крайне популярны.

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

ex к вашим услугам.

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

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

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

px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы cm, pt, mm, in

и pc, как объяснялось выше).

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

Используйте

em или px для шрифтов

Единицы pt (пункт) and pc

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

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

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства

(похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

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

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

em: h2 {font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее основного шрифта страницы.

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

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа

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

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

Новые единицы измерения в CSS

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

p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }

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

p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает).

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

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 с нуля

Смотреть

Использование rem, em и px в измерениях изображения



Я ищу какое-то объяснение относительно использования этих единиц измерения в измерениях изображения, но не могу его найти. Я читал в некоторых местах, чтобы забыть о пикселях и использовать только rem/em,, но я не знаю, применяется ли это также для изображений размеров (width/height).

Например, какой из них я должен использовать в этом случае ниже?

<img src="https://i.imgur.com/NReN4xE.png" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" />5em<br>
<img src="https://i.imgur.com/NReN4xE.png" />100px<br>
html css
Поделиться Источник Luiz     24 мая 2019 в 20:20

4 ответа

  • Тест скорости между единицами измерения размера: rem, em и px

    Есть ли какие-либо доказательства того, что конкретная единица калибровки занимает больше времени для обработки? Например, если бы вы использовали rem для определения размера всего вашего сайта, потребовалось бы больше времени для вычисления/рисования страницы, чем если бы все было задано…

  • Должен ли я использовать единицы измерения px или rem в моем CSS?

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


2

Многие свойства CSS принимают значения «length», такие как ширина, поле, отступ, размер шрифта и т. Д. Длина-это число, за которым следует единица длины, например 10px, 2em и т. Д.

** (px) **The единицы абсолютной длины являются фиксированными, и длина, выраженная в любом из них, будет отображаться как именно этот размер. Единицы измерения абсолютной длины не рекомендуется использовать на экране, поскольку размеры экрана сильно различаются. Однако их можно использовать, если известен носитель вывода, например, для макета печати.

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

Используйте REMs для размеров и интервалов. Используйте EMs для media запросов.

Таким образом, и пиксели , и REMs для media запросов не работают в различных браузерах при использовании масштабирования браузера, и EMs -лучший вариант, который у нас есть.

Поделиться sabeen kanwal     24 мая 2019 в 20:34


1

  • px отображает значение пикселя
  • rem использует корневой элемент ( html ), используя его font-size в качестве основы (по умолчанию 16 пикселей) для вычисления его размера, поэтому в основном ваше значение rem из img умножается на font-size на html
  • em использует первого родителя с font-size для вычисления размера , который он должен отобразить (вычисляется так же, как rem выше — родительское вычисленное значение px , умноженное на ваше em )., Если этот родитель использует em в своем font-size, ребенок будет использовать вычисленное/вычисленное font-size родителя.

Объяснение может быть трудным для понимания (особенно em ), посмотрите здесь: https://jsfiddle.net/6ydf931w/

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

Обычно я ограничиваю rem текстом в том случае, если он должен быть изменен глобально.

px очень предсказуемо, если это работает для вас, нет никакого вреда в его использовании.

Поделиться NickZA     24 мая 2019 в 20:47


1

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

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

Попробуйте изменить размер шрифта в приведенном ниже примере и убедитесь в этом сами:

html{
      font-size: 30px;
    }

.pixel1{
      width: 30px;
      height: 30px;
      background-color: red;
      margin-bottom: 10px;
}

.pixel2{
      width: 40px;
      height: 40px;
      background-color: red;
      margin-bottom: 10px;
}

.rem1{
      width: 1rem;
      height: 1rem;
      background-color: blue;
      margin-bottom: 10px;
}

.rem2{
      width: 1.4rem;
      height: 1.4rem;
      background-color: blue;
}
<div></div>
<div></div>
<div></div>
<div></div>

Поделиться Vasilis Georgoudis     24 мая 2019 в 20:52

  • REM / Em Путаница

    Сегодня я поиграл с использованием em’s/rem’s на новом сайте, и у меня есть несколько вещей, которые я хотел бы обсудить/спросить Здесь. В течение многих лет я был полностью пиксельным человеком с несколькими процентами, добавленными при необходимости. Я все время читаю, что ЭМ и Рем-это the way,…

  • rem, px, mediaqueries для браузеров >=IE9

    У меня есть проект, где IE9 -это браузер с минимальной совместимостью. Это означает, что я могу использовать rem -блок. По моему опыту работы с большими проектами, в которых участвует много разработчиков, использование em создает довольно большой беспорядок. Я не говорю, что это плохо само по…


1

И em , и rem являются гибкими, масштабируемыми единицами измерения, которые преобразуются браузером в значения пикселей в зависимости от настроек размера шрифта в вашем дизайне. Если вы используете значение 1em or 1rem, , оно может быть переведено в браузере как что-либо из 16px to 160px или любого другого значения.

значения px используются браузером как есть, поэтому 1px всегда будет отображаться как 1px .

Перевод единиц rem в значение пикселя определяется размером шрифта элемента html.

Перевод единиц измерения em в значения пикселей определяется размером шрифта элемента, на котором они используются. Используйте em units для размера, который должен масштабироваться в зависимости от размера шрифта элемента, отличного от root.Use rem единиц, для размера, который не нуждается в em единицах, и который должен масштабироваться в зависимости от размера шрифта браузера settings.Use единиц rem на media queries

Поделиться Mubeen Khan     24 мая 2019 в 21:20

Похожие вопросы:


Зачем использовать rem вместо px, если это все равно одно и то же?

Хорошо, во-первых, да, я прочитал много-много статей ( Должен ли я использовать единицы измерения px или rem в моем CSS? ) и форумов об этом. Я знаю, что 1px — это не физический пиксель , а скорее…


Следует ли использовать em/rem или px при расширении фундамента?

Я создаю новое веб-приложение с foundation 5.x и заметил, что все, похоже, основано на rem. Раньше я изменял отступы/поля с помощью px,но мне кажется, что создание темы с фундаментом может быть…


Преобразуются ли rem и em в px браузером во время рендеринга?

Когда мы используем em/rem, разве мы не даем браузеру дополнительную работу с точки зрения изменения значений em/rem на px во время рендеринга, что может быть не очень хорошей практикой, поскольку…


Тест скорости между единицами измерения размера: rem, em и px

Есть ли какие-либо доказательства того, что конкретная единица калибровки занимает больше времени для обработки? Например, если бы вы использовали rem для определения размера всего вашего сайта,…


Должен ли я использовать единицы измерения px или rem в моем CSS?

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


REM / Em Путаница

Сегодня я поиграл с использованием em’s/rem’s на новом сайте, и у меня есть несколько вещей, которые я хотел бы обсудить/спросить Здесь. В течение многих лет я был полностью пиксельным человеком с…


rem, px, mediaqueries для браузеров >=IE9

У меня есть проект, где IE9 -это браузер с минимальной совместимостью. Это означает, что я могу использовать rem -блок. По моему опыту работы с большими проектами, в которых участвует много…


Почему Bootstrap 4 выбирает rem и em вместо px?

Я хотел бы знать, почему Boostrap выбирает rem и em вместо px для новой версии Boostrap 4 . Мы можем посмотреть здесь Некоторые примеры переменных: $font-size-h2: 2.5rem !default; $font-size-h3:…


Когда выбрать REM вместо PX?

Когда я должен использовать rem поверх px? Я вижу много статей, в которых говорится, что я должен использовать REM, чтобы уважать предпочтения пользователя, но примеры всегда говорят о размере…


Как преобразовать em/rem в px?

У меня есть следующий скрипт, который преобразует px в em: perl -p -i -e ‘s/(\d+)px/($1\/16).em/ge’ stylesheet.css Однако, когда я настраиваю его, чтобы преобразовать em в px, он не работает хорошо:…

Оформление текста — Material-UI

The theme provides a set of type sizes that work well together, and also with the layout grid.

Шрифт

You can change the font family with the theme.typography.fontFamily property.

For instance, this demo uses the system font instead of the default Roboto font:

const theme = createTheme({
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});

Self-hosted fonts

To self-host fonts, download the font files in ttf, woff, and/or woff2 formats and import them into your code.

⚠️ This requires that you have a plugin or loader in your build process that can handle loading ttf, woff, and woff2 files. Fonts will not be embedded within your bundle. They will be loaded from your webserver instead of a CDN.

import RalewayWoff2 from './fonts/Raleway-Regular.woff2';

const raleway = {
  fontFamily: 'Raleway',
  fontStyle: 'normal',
  fontDisplay: 'swap',
  fontWeight: 400,
  src: `
    local('Raleway'),
    local('Raleway-Regular'),
    url(${RalewayWoff2}) format('woff2')
  `,
  unicodeRange:
    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
};

Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the CssBaseline component can be used (or any other CSS solution of your choice).

const theme = createTheme({
  typography: {
    fontFamily: 'Raleway, Arial',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [raleway],
      },
    },
  },
});


return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
);

Размер шрифта

Material-UI uses rem units for the font size. The browser <html> element default font size is 16px, but browsers have an option to change this value, so rem units allow us to accommodate the user’s settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.

To change the font-size of Material-UI you can provide a fontSize property. The default value is 14px.

const theme = createTheme({
  typography: {
    
    
    fontSize: 12,
  },
});

The computed font size by the browser follows this mathematical equation:

Responsive font sizes

The typography variants properties map directly to the generated CSS. You can use media queries inside them:

const theme = createTheme();

theme.typography.h4 = {
  fontSize: '1.2rem',
  '@media (min-width:600px)': {
    fontSize: '1.5rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '2.4rem',
  },
};

To automate this setup, you can use the responsiveFontSizes() helper to make Typography font sizes in the theme responsive.

You can see this in action in the example below. adjust your browser’s window size, and notice how the font size changes as the width crosses the different breakpoints:

import { createTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

Fluid font sizes

To be done: #15251.

HTML font size

You might want to change the <html> element default font size. For instance, when using the 10px simplification.

⚠️ Changing the font size can harm accessibility ♿️. Most browsers agreed on the default size of 16 pixels, but the user can change it. For instance, someone with an impaired vision could have set their browser’s default font size to something larger.

An htmlFontSize theme property is provided for this use case, which tells Material-UI what the font-size on the <html> element is. This is used to adjust the rem value so the calculated font-size always match the specification.

const theme = createTheme({
  typography: {
    
    htmlFontSize: 10,
  },
});
html {
  font-size: 62.5%; 
}

You need to apply the above CSS on the html element of this page to see the below demo rendered correctly

Variants

The typography object comes with 13 variants by default:

  • h2
  • h3
  • h4
  • h5
  • h5
  • h6
  • subtitle1
  • subtitle2
  • body1
  • body2
  • button
  • caption
  • overline

Each of these variants can be customized individually:

const theme = createTheme({
  typography: {
    subtitle1: {
      fontSize: 12,
    },
    body1: {
      fontWeight: 500,
    },
    button: {
      fontStyle: 'italic',
    },
  },
});

Default values

You can explore the default values of the typography using the theme explorer or by opening the dev tools console on this page (window.theme.typography).

Разница между единицами измерения px и em, rem в css

Возможности PX

  1. IE не может настроить размер шрифта, который использует пиксель как единицу измерения;

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

  3. Firefox может настраивать px, em и rem, но более 96% китайских пользователей сети используют браузер IE (или ядро).

px пиксели (пиксель). Единица относительной длины. Пиксель в пикселях относится к разрешению экрана монитора. (Цитируется из руководства CSS2.0)

Как сделать 1em равным 10 строкам пикселей;

Высота шрифта по умолчанию любого браузера составляет 16 пикселей.
Все неотрегулированные браузеры соответствуют: 1em = 16px.
Тогда 12px = 0,75em, 10px = 0,625em.
Чтобы упростить преобразование font-size, вам необходимо объявить Font-size = 62,5% в селекторе body в css, что делает значение em 16px * 62,5% = 10px, поэтому 12px = 1.2em, 10px = 1em, что означает, что вам нужно только разделить исходное значение в пикселях на 10, а затем заменить его на em в качестве единицы.

EM особенности

  1. Значение em не фиксировано;

  2. em унаследует размер шрифта родительского элемента.

Поэтому, когда мы пишем CSS, нам нужно обращать внимание на два момента:

  1. Селектор тела объявляет размер шрифта = 62,5%;

  2. Разделите исходное значение в пикселях на 10 и замените его на em в качестве единицы;

  3. Пересчитайте значения em для увеличенных шрифтов. Избегайте повторного объявления размера шрифта.

То есть, чтобы избежать явления 1,2 * 1,2 = 1,44. Например, если вы объявляете размер шрифта 1.2em в #content, тогда, когда вы объявляете размер шрифта p, вы можете использовать только 1em вместо 1.2em, потому что этот em не тот em, и он наследует высоту шрифта #content. Он становится 1em = 12px.

rem особенности

rem этоCSS3Добавлена ​​новая относительная единица (корень em, корень em), которая привлекла всеобщее внимание. В чем разница между этим устройством и em? Разница в том, что при использовании rem для установки размера шрифта для элемента это все еще относительный размер, ноПротивоположным является только корневой элемент HTML.. Можно сказать, что этот модуль сочетает в себе преимущества относительного и абсолютного размера. Благодаря ему все размеры шрифтов можно регулировать пропорционально только путем изменения корневого элемента, а также можно избежать цепной реакции послойного изменения размера шрифта. В настоящее время rem поддерживают все браузеры, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение также очень простое: написать объявление абсолютной единицы измерения. Эти браузеры игнорируют размер шрифта, установленный с помощью rem.
Пример:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>rem</title>
    <style type="text/css">
        html{
            font-size: 40px;
        }
        #first {
            font-size: 90px;
        }
        #second {
            width: 1rem;
            height: 1rem;
            background: gray;
        }
    </style>
</head>
<body>
<div>
    <div>
        <p> Я </p>
    </div>
</div>
</body>
</html>

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

Должен ли я использовать единицы измерения px или rem в CSS? [закрыто]

Я хотел бы похвалить ответ Джош3736 за предоставление превосходного исторического контекста. Несмотря на то, что он четко сформулирован, ландшафт CSS изменился почти за пять лет, с тех пор как был задан этот вопрос. Когда был задан этот вопрос, px был правильный ответ, но сегодня это уже не так.

тл; др: использоватьrem

Обзор объекта

Исторически pxединицы обычно представляли собой один пиксель устройства. Для устройств с более высокой и более высокой плотностью пикселей это больше не распространяется на многие устройства, например на Retina Display от Apple.

remединицы представляют собой г OOT эм размера. Это font-sizeиз всех совпадений:root . В случае с HTML это <html>элемент; для SVG это <svg>элемент. По умолчанию font-sizeв каждом браузере * 16px.

На момент написания статьи remподдерживается примерно 98% пользователей . Если вы беспокоитесь о других 2%, я напомню вам, что медиа-запросы также поддерживаются примерно 98% пользователей .

По использованию

px

Большинство примеров CSS в Интернете используют pxзначения, потому что они были стандартом де-факто. pt,in А также ряд других подразделений могли быть использованы в теории, но они не обрабатывать небольшие значения хорошо , как вы бы быстро нужно прибегать к фракциям, которые были больше к типу, и труднее рассуждать о.

Если вы хотите тонкую границу, pxвы можете использовать 1px, сpt чтобы использовать ее 0.75ptдля получения стабильных результатов, а это не очень удобно.

По использованию

rem

remЗначение по умолчанию 16pxне очень сильный аргумент для его использования. Письмо 0.0625remэто хуже , чем письма0.75pt , так почему бы кто — нибудь использовать rem?

Есть две части rem преимущество перед другими подразделениями.

  • Пользовательские настройки соблюдаются
  • Вы можете изменить кажущееся pxзначение remна то, что вы хотите

Уважение предпочтений пользователя

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

Уважение пожеланий пользователя не исключено. То, что браузер настроен 16pxпо умолчанию, не означает, что ни один пользователь не может изменить свои предпочтения 24pxили 32pxисправить слабое зрение или плохую видимость (например, блики на экране). Если вы основываете свои единицы измерения rem, любой пользователь с более высоким размером шрифта увидит пропорционально больший сайт. Границы будут больше, отступы будут больше, поля будут больше, все будет плавно увеличиваться.

Если вы основываете свои медиазапросы rem, вы также можете убедиться, что сайт, который видят ваши пользователи, соответствует их экрану. Пользователь с font-sizeнабором для 32pxна 640pxширокий браузер, будет эффективно видеть ваш сайт , как показано пользователю в 16pxна 320pxшироком браузере. Там нет абсолютно никаких потерь для RWD в использованииrem .

Изменение видимого

pxзначения

Поскольку remоснован на font-sizeна :rootузле, если вы хотите , чтобы изменить то , что 1remпредставляет собой, все , что вам нужно сделать , это изменить font-size:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>

Что бы вы ни делали, не установить :rootэлемент font-sizeк pxзначению.

Если установить font-sizeна htmlк аpx значению, вы сдуваетесь предпочтениями пользователя без пути , чтобы получить их обратно.

Если вы хотите изменить кажущееся значение rem, используйте %единицы измерения.

Математика для этого достаточно проста.

Кажущийся размер шрифта :rootравен 16px, но допустим, мы хотим изменить его на 20px. Все, что нам нужно сделать, это умножить 16на некоторое значение, чтобы получить 20.

Настройте свое уравнение:

16 * X = 20

И решить для X:

X = 20 / 16
X = 1.25
X = 125%
:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>

Делать все кратно 20не так уж и здорово, но общее предложение — сделать видимый размер remравным 10px. Магическое число для того, 10/16что есть 0.625, или 62.5%.

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>

Сейчас проблема заключается в том , что используемое по умолчанию font-sizeдля остальной части страницы набора слишком малы, но есть простое исправление для этого: Установить font-sizeна bodyиспользовании rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>

Важно отметить, что с этой корректировкой очевидное значение rem— 10pxэто означает, что любое значение, в которое вы могли записать, pxможет быть преобразовано непосредственно remпутем увеличения десятичного разряда.

padding: 20px;

превращается в

padding: 2rem;

Выбранный вами размер шрифта зависит от вас, поэтому, если вы хотите, нет никаких причин, по которым вы не можете использовать:

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

и имеют 1remравные 1px.

Таким образом, у вас есть простое решение, которое учитывает пожелания пользователя и позволяет избежать чрезмерного усложнения вашего CSS.

Подожди, так в чем подвох?

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

Медиа-запросы (использование

em)

Одна из первых проблем, с которой вы столкнетесь, remсвязана с медиа-запросами. Рассмотрим следующий код:

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

Здесь значение remменяется в зависимости от того, применяется ли медиа-запрос, а медиа-запрос зависит от значения rem, так что же происходит?

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

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

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

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

Сафари

К сожалению, в Safari есть известная ошибка, из-за которой изменение :rootразмера шрифта действительно изменяет вычисленные remзначения для диапазонов медиазапроса. Это может вызвать очень странное поведение, если размер шрифта :rootэлемента изменяется в медиа-запросе. К счастью, решение простое: используйте emединицы для медиазапросов .

Переключение контекста

Если вы переключаетесь между проектами между различными проектами, вполне возможно, что кажущийся размер шрифта remбудет иметь разные значения. В одном проекте вы можете использовать очевидный размер, а 10pxв другом — очевидный размер 1px. Это может привести к путанице и вызвать проблемы.

Моя единственная рекомендация здесь — придерживаться 62.5%конвертирования remв видимый размер 10px, потому что в моем опыте это встречалось чаще.

Общие CSS библиотеки

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

Однако, если вы все еще хотите использовать rem, рассмотрите возможность выпуска Sass или LESS версии таблицы стилей с переменной, чтобы переопределить масштабирование для видимого размера rem.

* Я не хочу отговаривать кого-либо от использования rem, но я не смог официально подтвердить, что каждый браузер использует 16pxпо умолчанию. Видите ли, есть много браузеров, и для одного браузера было бы не так уж и сложно отклониться, скажем, 15pxили 18px. Однако при тестировании я не видел ни одного примера, в котором браузер, использующий настройки по умолчанию, в системе, использующей настройки по умолчанию, имел какое-либо значение, кроме 16px. Если вы найдете такой пример, пожалуйста, поделитесь им со мной.

Размеры шрифтов CSS. Пиксели vs Em vs Rem vs Проценты vs Viewport единицы

В этой статье вы узнаете про выставление размера шрифта в пикселях, em, rem, процентах и viewport единицах.

Эта статья перевод — CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units

Очень много обсуждений велось по поводу пикселей, em, процентов, rem и какое свойство шрифтов когда использовать. Не смотря на более сотни статей в сети, эта тема может быть довольно запутанной, учитывая то, как использование этих свойств шрифтов разнится в зависимости от нужд наших проектов. Для примера, некоторые советуют не использовать фиксированные пиксели на базовом уровне (html и body элементы), так как пользователь не будет иметь возможности сбросить размер шрифтов под свои параметры. Но для людей типа меня, которые зависимы от bootstrap, это не совсем благоразумно. Мы заканчиваем с фиксированными основными значениями в пикселях и начинаем создавать свойства шрифтов для всего проекта, отталкиваясь от основных пиксельных значений.

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

Пиксели

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

Em

Em — гибкая масштабируемая единица, которая конвертируется браузером в пиксели. Если стандартный размер шрифта в Chrome равен 16px, то 1 em = 16px. Главное заблуждение по поводу em в том, что оно зависит от размера шрифта родительского элемента. Следуя спецификации W3, em относителен размеру шрифта элемента на котором их используют. Em широко используются для типографии, такой как заголовки, текста, параграфы и с элементами ассоциированными с ней, такими как внешние отступы и внутренние. Если вы выставите базовый размер шрифта для для html и body элементов в пикселях и свойства ваших типографических элементов будут определяться в с помощью em, для адаптивного дизайна все что вам нужно будет сделать это изменить стандартный размер шрифта на базовом уровне, например.

@media (max-width: 400px) {
 html, body { font-size: 15px; }
}

и все em значения будут автоматически пересчитаны.

Тем не менее, у em есть большое предостережение! Наследование!

Для примера, <div> с размером шрифта в 16px содержит <p> размером шрифта в 2em, что пересчитывается как 32px для <p>. Теперь добавьте <div> в <p> с размером шрифта в 0.5em, как результат у дива будет размер 16px, как у половины от 32px, а не 8px. И тут нам на помощь приходят rem.

Rem

rem относителен размеру шрифта корневого элемента(html элемент). Если размер шрифта html элемента равен 16px, то 1rem = 16px. Rem будет ВСЕГДА относителен корневому элементу, не полагаясь на вложенные элементы. Тем не менее, использование исключительно rem без em может вызвать своеобразные проблемы в плане типографики, так как она может стать слишком большой или маленькой, что приведет к проблемам в масштабируемости.

Проценты

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

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

Единицы viewport

Ширина и высота viewport свойств относительна ширине/высоте заданного размера viewport.

Подробно про viewport единицы вы можете почитать в этой статье.

1vw = 1% ширины viewport

1vh = 1% высоты viewport

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

Финальный вердикт

С тех пор как я часто начал использовать Bootstrap, мой стандартный размер базового шрифта стал в пикселях. Я использую проценты, чтобы выставить ширину и высоту для изображений, контейнеров и дивов, а em и rem для типографики и элементов относящихся к типографике, таким как margin и padding и т. п. Сейчас я играюсь с единицами viewport для адаптивной типографики и нахожу это очень крутым. Экспериментируйте с этими свойствами как можно больше и вы вскоре найдете стиль подогнанный именно для вас.

единиц CSS

Единицы CSS

CSS имеет несколько различных единиц для выражения длины.

Многие свойства CSS принимают значения длины, такие как ширина , поле , отступ , размер шрифта и т. Д.

Длина — это число, за которым следует единица длины, например 10px , 2em и т. Д.

Пример

Установите разные значения длины, используя px (пиксели):

h2 {
размер шрифта: 60 ​​пикселей;
}

p {
font-size: 25px;
высота строки: 50 пикселей;
}

Попробуйте сами »

Примечание: Пробел не может быть между числом и единицей измерения.Однако, если значение 0 , блок можно не устанавливать.

Для некоторых свойств CSS разрешена отрицательная длина.

Существует два типа единиц длины: абсолютных и относительных .

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

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

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

Установка Описание
см см Попытайся
мм миллиметров Попытайся
дюйм дюймов (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей * пикселей (1 пиксель = 1/96 часть 1 дюйма) Попытайся
пт баллов (1pt = 1/72 от 1in) Попытайся
шт пик (1 шт. = 12 пт) Попытайся

* Пикселей (пикселей) относительно устройства просмотра.Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) дисплея устройства. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

Относительная длина

Единицы относительной длины определяют длину относительно другого свойства длины. Относительные единицы длины лучше масштабируются между различными средами визуализации.

Установка Описание
выс. Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта) Попробовать
бывш. Относительно высоты текущего шрифта по оси x (используется редко) Попробовать
шасси Относительно ширины «0» (нуля) Попробовать
rem Относительно размера шрифта корневого элемента Попробовать
VW Относительно 1% ширины области просмотра * Попробовать
vh Относительно 1% высоты области просмотра * Попробовать
vmin Относительно 1% меньшего размера области просмотра * Попробовать
vmax Относительно 1% большего размера области просмотра * Попробовать
% Относительно родительского элемента Попробовать

Совет: Единицы em и rem идеально подходят для создания идеальных масштабируемый макет!
* Viewport = размер окна браузера.Если область просмотра 50 см широкий, 1vw = 0,5 см.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую единица длины.

Блок длины
em, ex,%, px, cm, mm, in, pt, pc 1,0 3,0 1,0 1,0 3,5
шасси 27.0 9,0 1,0 7,0 20,0
rem 4,0 9,0 3,6 4,1 11,6
vh, vw 20,0 9,0 19,0 6,0 20,0
vmin 20,0 12,0 19,0 6.0 20,0
vmax 26,0 16,0 19,0 7,0 20,0

CSS-единиц для font-size: px | em | rem | Диксита Ганатра

Фото Александра Эндрюса на Unsplash

Когда я начал копаться в CSS, я нашел различные единицы для font-size . Было немного непонятно, какой из них использовать, когда, где и почему. Потратив некоторое время, я нашел три устройства, которые решил использовать в своих проектах — px , em и rem .

Пиксели — это самый простой способ измерения. Но есть загвоздка. Допустим, мы использовали пиксели по всему нашему сайту, и мы также управляли медиа-запросами. Что, если пользователь изменит размер шрифта по умолчанию браузера (или устройства)? Размер шрифта вашего заголовка (скажем, 20 пикселей) останется 20 пикселей. Следовательно, настройки шрифта пользователя не будут отражены. Что не очень удобно для пользователей. Таким образом, пиксели могут хорошо справляться с интервалом и макетом, но не подходят для размера шрифта. На помощь приходят em s и rem s.

em равно вычисленному размеру шрифта родительского элемента. Например, если есть элемент div , определенный с размером шрифта : 16px , то для этого div и для его дочерних элементов 1em = 16px .

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

Вот пример для em.

Здесь вы можете видеть, что мы дали font-size: 20px от до .parent и font-size: 1.5em от до .child . Вычисленные размеры шрифта для .child ( #outerChild и #innerChild ) различаются. #outerChild использует размер шрифта из родительского .parent . Итак, вычисленный размер шрифта #outerChild будет 1,5 * 20 пикселей = 30 пикселей. А #innerChild использует размер шрифта из своего родительского #outerChild (для которого уже вычислен размер шрифта 30 пикселей).Следовательно, вычисленный размер шрифта вложенного .child будет 1,5 * 30 пикселей = 45 пикселей.

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

em отлично работает с макетом, таким как меню боковой панели, где вы хотите, чтобы элементы подменю постепенно имели меньший размер шрифта. Вот пример этого.

Вы также можете использовать em с медиа-запросами.Вот отличная статья, которая мне очень помогла.

rem значений относятся к корневому элементу html , а не к родительскому элементу. То есть, если размер шрифта корневого элемента составляет 16 пикселей, то 1 rem = 16 пикселей для всех элементов. Если размер шрифта не определен явно в корневом элементе, то 1rem будет равен размеру шрифта по умолчанию, предоставленному браузером (обычно 16 пикселей).

Когда дело доходит до интервала и размера шрифта, я предпочитаю использовать rem . Начиная с rem использует размер шрифта корневого элемента вместо размера шрифта его родительского элемента.

Предположим, font-size: 10px установлено для корневого элемента, что делает 1rem = 10px везде на нашей веб-странице. Поскольку 1px = 0.1rem, вычисления просты. Но установка размера корневого шрифта в пикселях будет иметь ту же проблему, что я упоминал в разделе пикселей .

Решение этой проблемы — процентов . Обычно размер шрифта браузера по умолчанию составляет 16 пикселей. Установка font-size: 100% сделает 1rem = 16px. Но это немного затруднит расчеты.Лучше установить font-size: 62,5% . Потому что 62,5% от 16 пикселей составляет 10 пикселей. Таким образом, 1rem = 10px.

Вот пример кода в SCSS:

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

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

В чем разница между PX, EM, REM,%, VW и VH?

При проектировании с помощью Elementor вы можете заметить, что у некоторых элементов есть параметры для выбора размера, позволяющие выбрать PX, EM, REM,%, VW, или VH . Но что на самом деле означают эти параметры и когда следует использовать один вместо другого?

Начнем с основ.

В CSS вы можете указать размеры или длину элементов, используя различные единицы измерения.Единицы измерения, которые вы найдете в некоторых вариантах Elementor, включают PX, EM, REM,%, VW и VH , хотя в CSS доступно несколько других. Не каждый элемент Elementor предлагает все эти единицы. Elementor представляет только те параметры, которые наиболее подходят для данного элемента.

Самый важный аспект, который нужно знать о различных единицах измерения, заключается в том, что некоторые единицы, такие как PX, являются абсолютными, а некоторые — относительными.

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

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

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

EM : относительно родительского элемента

REM : относительно корневого элемента (тег HTML)

% : относительно родительского элемента

VW : относительно ширины окна просмотра

VH : относительно высоты окна просмотра

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

Рассмотрим простой пример.

В большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей. Относительные единицы рассчитывают размер на основе этой базы. Если вы измените эту базу, установив базовый размер для HTML-тега с помощью CSS, тогда он станет основой для вычисления относительных единиц на всей остальной странице. Аналогичным образом, если пользователь изменяет размер шрифта, это становится основой для вычисления относительных единиц.

Итак, что означают эти единицы при работе со значением по умолчанию 16 пикселей?

Указанное вами число умножит это число на размер по умолчанию.

1em = 16 пикселей (1 * 16)

2em = 32 пикселя (2 * 16)

. 5em = 8 пикселей (0,5 * 16)

1рем = 16 пикселей

2rem = 32 пикс.

.5rem = 8 пикселей

100% = 16 пикселей

200% = 32 пикс.

50% = 8 пикселей

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

.

1em = 14 пикселей (1 * 14)

2em = 28 пикселей (2 * 14)

. 5em = 7 пикселей (0,5 * 14)

1рем = 14 пикселей

2rem = 28 пикселей

.5rem = 7px

100% = 14 пикселей

200% = 28 пикселей

50% = 7 пикселей

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

В чем разница между EM и REM?

Глядя на диаграмму выше, видно, что EM и REM выглядят совершенно одинаково. Так чем же они отличаются?

Проще говоря, они различаются по наследству. Как уже упоминалось, REM основан на корневом элементе (HTML). Каждый дочерний элемент, использующий REM, будет затем использовать корневой размер HTML в качестве точки вычисления, независимо от того, заданы ли для родительского элемента какие-либо другие размеры.

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

Так что насчет%, VW и VH? О чем они все?

В то время как PX, EM и REM в основном используются для изменения размера шрифта,%, VW и VH в основном используются для полей, отступов, интервалов и ширины / высоты.

Повторюсь, VH означает «высота области просмотра», которая является видимой высотой экрана. 100VH будет представлять 100% высоты области просмотра или полную высоту экрана. И, конечно же, VW означает «ширина области просмотра», то есть видимая ширина экрана. 100VW будет представлять 100% ширины области просмотра или полную ширину экрана. % отражает процентную долю размера родительского элемента, независимо от размера области просмотра.

Давайте посмотрим на несколько примеров, когда Elementor предоставляет параметры%, VW и VH.

Ширина столбца : если вы редактируете макет столбца Elementor, вы заметите, что доступна только одна единица измерения ширины -%. Ширина столбцов работает хорошо и гибко только при использовании процентов, поэтому других вариантов не предусмотрено.

Поля : Поля раздела могут быть указаны в формате PX или%. Использование% обычно предпочтительнее, чтобы поля не превышали размер содержимого, например, при уменьшении масштаба для мобильного устройства. При использовании процента от ширины устройства ваши поля останутся относительно размера содержимого, что почти всегда предпочтительнее.

Padding : заполнение раздела может быть указано в PX, EM или%. Как и в случае с полями, часто предпочтительнее использовать либо EM, либо%, чтобы отступы оставались относительными по мере увеличения размера страницы.

Размер шрифта : если вы измените типографику элемента, например заголовка, вы увидите четыре варианта: PX, EM, REM и VH

.

Вы когда-нибудь создавали большой заголовок и восхищались тем, как хорошо он выглядит на настольном компьютере, только чтобы понять, что он слишком велик на мобильном устройстве? (Признание вины: неоднократно).

Ключом к элегантному решению этой проблемы является использование EM, REM или VW вместо PX. Что вы выберете, зависит от вашей конкретной ситуации. Я обычно выбираю EM, потому что хочу, чтобы размер был относительно родительского заголовка. Но если вы предпочитаете, чтобы размер был относительно размера корня (HTML), выберите вместо этого REM. Или вы можете установить его относительно ширины области просмотра (VW), если это лучше для вашего случая.

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

Подробнее о VW и VH

Единицы окна просмотра представляют собой процент от текущего окна просмотра браузера (текущий размер браузера). Хотя это похоже на единицы измерения%, есть разница. Единицы области просмотра рассчитываются как процент от текущего размера области просмотра браузера. С другой стороны, процентные единицы рассчитываются как процент от родительского элемента, который может отличаться от размера области просмотра.

Рассмотрим пример области просмотра мобильного экрана размером 480 x 800 пикселей.

1 VW = 1% ширины области просмотра (или 4,8 пикселя)

50 VW = 50% ширины области просмотра (или 240 пикселей)

1 VH = 1% высоты окна просмотра (или 8 пикселей)

50 VH = 50% высоты области просмотра (или 400 пикселей)

Если размер области просмотра изменяется, размер элемента изменяется соответственно.

Когда следует использовать одно устройство вместо другого?

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

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

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

VW полезен для создания элементов полной ширины (100%), заполняющих всю ширину области просмотра. Конечно, вы можете использовать любой процент ширины области просмотра для достижения других целей, например, 50% для половины ширины и т. Д.

VH полезен для создания элементов полной высоты (100%), которые заполняют всю высоту области просмотра. Конечно, вы можете использовать любой процент высоты окна просмотра для достижения других целей, например, 50% для половины высоты и т. Д.

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

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

html — Должен ли я использовать единицы значений px или rem в моем CSS?

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

tl; dr: использовать rem

Обзор устройства

Исторически пикселей единиц обычно представляли один пиксель устройства. С устройствами, имеющими все более и более высокую плотность пикселей, это больше не актуально для многих устройств, например, с дисплеем Retina от Apple.

rem единиц представляют размер r oot em . Это размер шрифта для всего, что соответствует : root . В случае HTML это элемент ; для SVG это элемент .Размер шрифта по умолчанию в каждом браузере * равен 16px .

При использовании

пикселей

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

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

При использовании

rem

rem Значение по умолчанию 16px не очень веский аргумент в пользу его использования. Запись 0,0625 rem на хуже , чем запись 0,75pt , так зачем кому-то использовать rem ?

Преимущество rem над другими юнитами состоит из двух частей.

  • Пользовательские настройки соблюдаются
  • Вы можете изменить кажущееся значение пикселей из rem на все, что захотите

Соблюдение настроек пользователя

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

Уважение к пожеланиям пользователя — не исключение. Тот факт, что для браузера по умолчанию установлено значение 16px , не означает, что какой-либо пользователь не может изменить свои предпочтения на 24px или 32px , чтобы исправить слабое зрение или плохую видимость (например.Икс. блики экрана). Если вы основываете свои единицы на rem , любой пользователь с большим размером шрифта увидит сайт пропорционально большего размера. Границы будут больше, отступы будут больше, поля будут больше, все будет плавно увеличиваться.

Если вы основываете свои медиа-запросы на rem , вы также можете убедиться, что сайт, который видят ваши пользователи, соответствует их экрану. Пользователь с размером шрифта , установленным на 32px в широком браузере 640px , будет эффективно видеть ваш сайт так, как показано пользователю с размером 16px в широком браузере 320px .При использовании rem нет абсолютно никаких потерь для RWD.

Изменение видимого значения

пикселей

Поскольку rem основан на размере шрифта узла : root , если вы хотите изменить то, что представляет 1rem , все, что вам нужно сделать, это изменить размер шрифта :

 : root {
  размер шрифта: 100 пикселей;
}
тело {
  размер шрифта: 1 бэр;
}  
  
 Никогда не делайте этого, пожалуйста

Что бы вы ни делали, не устанавливайте для элемента : root размер шрифта значение пикселей .

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

Если вы хотите изменить кажущееся значение на rem , используйте % единиц.

Расчеты для этого достаточно просты.

Кажущийся размер шрифта : root равен 16px , но, допустим, мы хотим изменить его на 20px .Все, что нам нужно сделать, это умножить 16 на некоторое значение, чтобы получить 20 .

Составьте уравнение:

  16 * X = 20

И решите для X :

  X = 20/16
Х = 1,25
Х = 125%
  
 : root {
  размер шрифта: 125%;
}  
  
 Если вы используете размер шрифта по умолчанию, у меня высота 20 пикселей.

Делать все, кратное 20 , не так уж и хорошо, но общее предложение — сделать видимый размер rem равным 10px .Магическое число для этого — 10/16 , что равно 0,625 или 62,5% .

 : root {
  размер шрифта: 62,5%;
}  
  
 Если вы используете размер шрифта по умолчанию, у меня высота 10 пикселей.

Проблема теперь в том, что ваш размер шрифта по умолчанию для остальной части страницы установлен слишком малым, но для этого есть простое решение: установите размер шрифта на body , используя rem :

 : root {
  размер шрифта: 62.5%;
}

тело {
  размер шрифта: 1.6rem;
}  
  
 Я размер шрифта по умолчанию

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

  отступ: 20 пикселей;

превращается в

  набивка: 2рем;

Видимый размер шрифта, который вы выбираете, зависит от вас, поэтому, если вы хотите, нет причин, по которым вы не можете использовать:

 : root {
  размер шрифта: 6.25%;
}
тело {
  размер шрифта: 16rem;
}

и 1rem равно 1px .

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

Подожди, а в чем прикол?

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

Media Queries (используйте

em )

Одна из первых проблем, с которыми вы столкнетесь с rem , связана с медиа-запросами. Рассмотрим следующий код:

 : root {
  размер шрифта: 1000 пикселей;
}
@media (min-width: 1rem) {
  :корень {
    размер шрифта: 1px;
  }
}

Здесь значение rem изменяется в зависимости от того, применяется ли медиа-запрос, а медиа-запрос зависит от значения rem , так что же, черт возьми, происходит?

rem в медиа-запросах использует начальное значение font-size и не должно (см. Раздел Safari) учитывать любые изменения, которые могли произойти с размером шрифта элемента : root .Другими словами, очевидное значение — , всегда 16px .

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

  | px | rem |
+ ------ + ----- +
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |

Кроме того, если вы используете препроцессор CSS, вы можете использовать миксины или переменные для управления медиазапросами, которые полностью замаскируют проблему.

Safari

К сожалению, в Safari есть известная ошибка, при которой изменения размера шрифта : root действительно изменяют вычисленные значения rem для диапазонов медиа-запросов. Это может вызвать очень странное поведение, если размер шрифта элемента : root изменяется в медиа-запросе. К счастью, решение простое: используйте em единиц для медиа-запросов.

Переключение контекста

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

Моя единственная рекомендация — придерживаться 62,5% , чтобы преобразовать rem в видимый размер 10px , потому что, по моему опыту, это было более распространено.

Общие библиотеки CSS

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

Если вы все еще хотите использовать rem , рассмотрите возможность выпуска версии таблицы стилей Sass или LESS с переменной, чтобы переопределить масштабирование для видимого размера rem .

* Я не хочу никого отпугивать от использования rem , но я не смог официально подтвердить, что каждый браузер использует по умолчанию 16px . Видите ли, существует множество браузеров, и для одного браузера не так уж сложно было бы хоть немного разойтись, скажем, до 15px или 18px .Однако при тестировании я не видел ни одного примера, где бы браузер, использующий настройки по умолчанию в системе с настройками по умолчанию, имел любое значение, отличное от 16px . Если найдете такой пример, поделитесь, пожалуйста, со мной.

Размер в CSS: px vs em vs rem

Мы уже знакомы с использованием пикселей для изменения размера в CSS, но зачем использовать em или rem ? Создавая доступные веб-сайты, вы должны учитывать их включение. Когда вы используете пикселей , вы не ставите предпочтения пользователя во главу угла.Когда пользователь увеличивает масштаб или изменяет настройку шрифта браузера, веб-сайты должны настраиваться в соответствии с настройками пользователя. пикселей не масштабируются, но масштабируются em и rem .

Как продолжение этого, рекомендуется устанавливать размер шрифта элемента html в процентах. Предполагая, что размер шрифта браузера установлен на 16 пикселей (т. Е. По умолчанию), установка размера шрифта элемента html (корневого) на 62,5% будет по умолчанию 1rem равным 10 пикселей.

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

Разница

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

Элемент

( em ) и корневой элемент ( rem ) — это адаптивные единицы, интерпретируемые браузером в эквивалентные единицы пикселей .Это относительные единицы. Изменение значения родительского или корневого элемента влияет на значение относительных единиц. Они масштабируются вместе с устройством. Итак, что отличает их друг от друга? Разница заключается в том, как значения выводятся браузером. Чтобы просмотреть вычисленные значения, откройте Инструменты разработчика Chrome и перейдите на вкладку Computed .

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

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

Использование em

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

см :

Unit = Размер шрифта стилизуемого элемента x Заданное значение стилизуемого элемента

Для элемента раздела с размером шрифта 14px , когда вы создаете правило со свойством padding, установленным на 3em , оно будет оцениваться как 42px (14 x 3 = 42).Это не зависит от размера шрифта, назначенного элементу html. Проще говоря, размер шрифта элемента, для которого объявлена ​​единица em, определяет значение единицы пикселя.

 
html {
  размер шрифта: 18 пикселей;
}

раздел {
  размер шрифта: 14 пикселей;
  заполнение: 3em;
}  
 
html {
  размер шрифта: 18 пикселей;
}

раздел {
  размер шрифта: 14 пикселей;
  padding-bottom: 42px;
  отступ слева: 42 пикселей;
  padding-right: 42px;
  padding-top: 42px;
}

Использование rem

При использовании rem эквивалент пикселей зависит от размера шрифта элемента html.

рем :

Unit = Размер шрифта корневого элемента html x Заданное значение стилизуемого элемента

Дана веб-странице с корневым элементом, которому назначен размер шрифта 18 пикселей , а свойству поля присвоено значение 2rem . Расчетное значение маржи составит 36 пикселей (18 x 2 = 36).

 
html {
  размер шрифта: 18 пикселей;
  маржа: 2бэр;
}  
 
html {
  размер шрифта: 18 пикселей;
  нижнее поле: 36 пикселей;
  маржа слева: 36 пикселей;
  поле справа: 36 пикселей;
  маржа сверху: 36 пикселей;
}

Влияние наследования на единицу

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

см :

Единица = Размер шрифта стилизуемого элемента x Размер шрифта родительского и родительского элементов (если есть) x Заданное значение стилизуемого элемента

  <раздел>
  Бабушка и дедушка
  

    Родитель
    

      Ребенок