Css em px pt: em, px, pt, cm, in…
Единицы размера в CSS | Учебные курсы
Существует много свойств CSS, которые требуют размер в качестве единицы:
- font-size определяет размер текста;
- border-width определяет толщину границ элементов;
- margin определяет пространство между элементами;
- left/right/top/bottom позволяют позиционировать и перемещать элементы.
Наиболее часто используемые единицы:
- px для пикселей;
- % для процентов;
- em для определения размера относительно родительского значения font-size.
Пиксели
Поскольку компьютерные экраны используют пиксели для отображения содержимого, это самая распространённая единица размера в CSS.
Пиксель может быть использован для задания фиксированной ширины элемента:
body { width: 400px; }Или установить размер текста:
body { font-size: 20px; }Пиксели в CSS являются простыми, поскольку они определяют абсолютные значения и не зависят от других наследуемых свойств CSS.
Они также широко используются для позиционирования и расстояния.
Проценты
Проценты — это относительные единицы: они полагаются на родителя и/или предка элемента.
К примеру, блочные элементы, такие как абзацы, естественным образом занимают всю доступную ширину. Следующее правило CSS изменит их размер до половины доступной ширины.
p { width: 50%; }Проценты могут помочь задать другие свойства CSS, такие как размер текста.
CSS
strong { font-size: 150%; }HTML
<p>Есть <strong>важные</strong> проблемы, стоящие перед нами.</p>em
em является относительной единицей и зависит от значения font-size элемента.
Например, если у родителя font-size задан как 20px и вы применяете font-size: 0.8em к дочернему элементу, то этот дочерний элемент будет отображать font-size как 16px.
Не следует путать размер em с селектором em, который ориентирован на элемент <em>.
Единица em интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши <h2> были вдвое больше, чем основной текст, ваши <h3> в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:
body { font-size: 16px; }
h2 { font-size: 2em; } /* = 32px */
h3 { font-size: 1.5em; } /* = 24px */
aside { font-size: 0.75em; } /* = 12px */Если вы решите изменить размер текста <body>, относительные размеры заголовков и боковой панели
Только изменив одно значение, поменяются и все остальные значения:
body { font-size: 20px; }
h2 { font-size: 2em; } /* = 40px */
h3 { font-size: 1.5em; } /* = 30px */
aside { font-size: 0.75em; } /* = 15px */rem
Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент <html>.
html { font-size: 18px; } body { font-size: 1rem; } /* = 18px */ h2 { font-size: 2rem; } /* = 36px */ h3 { font-size: 1.5rem; } /* = 27px */
Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.
Если вы установили html { font-size: 18px; }:
- 2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
- 2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.
Быстрый пример, где 2em отличается от 2rem:
html { font-size: 20px; } p { font-size: 0.8rem; } /* = 16px */ p span { font-size: 2em; } /* = 16px * 2 = 32px */ p strong { font-size: 2rem; } /* = 20px * 2 = 40px */
<span> полагается на значение font-size у <р>, в то время как <strong> полагается на значение font-size у <html>.
Какую единицу использовать?
Я бы рекомендовал начать с пикселей: поскольку это абсолютная величина, они не зависят от контекста элемента. Пиксели простые, позволяют установить размер текста, ширину и высоту изображения, толщину границы, координаты положения и др.
Проценты и значения em могут быть использованы наряду с пикселями, особенно для относительных размеров текста.
Урок №9. Размеры в CSS: px, em, %, pt
Автор: Администратор
Просмотров: 2598
В это уроке речь пойдет в способах задания размеров в CSS, всего есть четыре варианта:
- px — пиксели
- em — единицы
- % — проценты
- pt — точки
Pixels (px):«px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Points (pt): «pt», традиционно используются в печатных СМИ. Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер.
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д.
Percents (%): Для размера шрифтов единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility). Для размеров блоков же они имеют несколько другой смысл, за 100% берется соответствующий размер у родительского элемента, например мы хотим взять 50% от элемента, в котором помещается этот текст, внутри этого дива возьмем еще один див, который возьмет так же 50% по ширине и для сравнения ниже возьмем див с размером 25%, вот что у нас получится:
50% от размеров div1
50% от размеров статьи(это div1)50% от размеров статьи
Тест
- Если 1em = 20px, чему равен 1.5em
- 15px
- 30px
- 1.5px
- 20px
- Чему равено 72pt?
- 2 тугрикам
- 36px
- 1дюйм
- 72дюйма
Урок №9. Размеры в CSS: px, em, %, pt
Автор: Администратор
Просмотров: 2597
В это уроке речь пойдет в способах задания размеров в CSS, всего есть четыре варианта:
- px — пиксели
- em — единицы
- % — проценты
- pt — точки
Pixels (px):«px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Points (pt): «pt», традиционно используются в печатных СМИ. Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер.
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д.
Percents (%): Для размера шрифтов единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility). Для размеров блоков же они имеют несколько другой смысл, за 100% берется соответствующий размер у родительского элемента, например мы хотим взять 50% от элемента, в котором помещается этот текст, внутри этого дива возьмем еще один див, который возьмет так же 50% по ширине и для сравнения ниже возьмем див с размером 25%, вот что у нас получится:
50% от размеров div1
50% от размеров статьи(это div1)50% от размеров статьи
Тест
- Если 1em = 20px, чему равен 1.5em
- 15px
- 30px
- 1.5px
- 20px
- Чему равено 72pt?
- 2 тугрикам
- 36px
- 1дюйм
- 72дюйма
Единица измерения REM в CSS
В CSS-правилах используется два варианта единиц измерения: абсолютные и относительные. Изначально была известна лишь одна абсолютная единица измерения – пиксель. Ее размер зависел от матрицы или монитора, и его было легко рассчитать самостоятельно.
Недостатки использования пикселей
Для верстальщиков, работающих на СМИ, на странице важно выделить именно контент. Он должен быть удобным для чтения, с оптимальной длиной строки и достаточного размера, чтобы даже пользователю с низким зрением было удобно воспринимать текст. Неважно, с какого устройства пользователь читает статью и насколько у него хорошее зрение – ему важно понять содержание статьи без специальных приспособлений. При использовании пикселей в верстке увеличение масштаба часто приводит к тому, что количество слов в строке уменьшается, появляются некрасивые переносы текста или же контент вовсе выпадает из контейнера. Поэтому веб-разработчики и дизайнеры начали использовать при написании кода проценты и относительные единицы измерения, такие как EM, REM. Но они до сих пор не смогли полностью вытеснить пиксели.
История появления относительных единиц
Так как изначально страницы в большинстве браузеров не масштабировались, пиксели долго оставались единственным вариантом описания размеров шрифтов. Но с развитием веб-технологий появилась необходимость в создании новых единиц измерения. Так появились EM и %, а затем и REM, значения которых были привязаны к стандартам браузера и обычно равнялись 16 пикселям. Существует эмпирическое правило, объединяющее базовые размеры шрифтов: 100 % = 1 em ~ 16px ~ 14pt. Это означает, что, если не изменить размер шрифта в каких-либо дочерних элементах, по умолчанию в браузере он будет составлять около 16 пикселей и примерно 14пт (типографского пункта), но всегда 100 % и 1 EM.
Применение относительных единиц измерения облегчило верстку, сделав модульные элементы более управляемыми. Современная техника требует, чтобы при масштабировании элементы на страницах менялись в размерах в зависимости от разрешения экрана или браузера пользователя. Потому EM и REM в CSS стали незаменимым помощником для создания сайтов, где требуются адаптивные размеров шрифтов. Сейчас большинство браузеров не испытывают проблем при масштабировании текста, а их поведение при увеличении или уменьшении размера шрифта согласовано между собой. Но любой макет следует проверять в нескольких браузеров, в том числе и в устаревших, чтобы понять, как будет выглядеть конечный результат для различных пользователей.
Использование относительных единиц
Относительные единицы измерения, которые так распространены в типографике и CSS, – EM и REM – пока что менее известны рядовым пользователям, чем пиксели. Не каждый начинающий дизайнер или верстальщик понимает их назначение и использует правильно. Между профессиональными дизайнерами до сих пор ведутся споры, когда лучше использовать ту или иную единицу. Тем не менее относительные единицы значительно облегчают отзывчивую верстку и считаются наиболее эффективным методом при построении модульных компонентов. EM и REM применяются, чтобы задать размер различным элементам – заголовкам, границам, рамкам. Но их размеры высчитываются по-разному.
Что такое EM
EM – это относительная единица измерения, которая зависит от размера шрифта родительского элемента. Чаще всего его прописывают в правиле CSS для тега body. В этом теге задаются параметры всем элементам на странице. Как понимать единицы EM в CSS и вычислять их значение? Все достаточно просто. Если font-size (то есть размер шрифта) в селекторе body будет равен 10 пикселям, 1 EM тоже равен 10 пикселям, то есть верстальщик задает значение этой единицы самостоятельно. В результате все остальные размеры, заданные в EM, будут высчитываться исходя из этого значения. Тексты, параметры которых задается в пикселях и в относительных единицах, могут не отличаться визуально до тех пор, пока их не придется изменять. Но они очень удобны при создании гибких модульных блоков. Если не задать размер шрифта, но использовать в коде относительные единицы, они будут рассчитываться по умолчанию, и 1 EM окажется равен 16 пикселям.
Особенности единицы измерения EM
Существует еще одна особенность при использовании относительных единиц измерения EM. Если в селекторе установлен размер шрифта равный 2 EM, тогда при использовании EM в параметрах для другого свойства в этом же селекторе величина этой единицы будет применяться иначе. В результате размер элемента увеличится вдвое. Параметры EM рассчитываются исходя из размера шрифта в определенном блоке. То есть, если font-size в селекторе параграфа (тег «p») равен 2 EM, а для body он составляет 10 пикселей, тогда при добавлении в селектор тега p размера внешней границы текста («margin») толщиной 1 EM он будет равен уже не 10, а 20 пикселям.
Для того чтобы получить размер шрифта, равный 10 пикселям, нужно использовать 0,5 EM. Такие изменения значений в разных частях кода часто путают начинающих верстальщиков. Существовала также проблема с использованием EM в CSS – при установке размера шрифта 0.875 EM, каждый последующий вложенный элемент уменьшался. Нежелательные эффекты вызывало использование этой единицы и в margin-bottom. В этом случае размеры шрифты влияли на поля вокруг элемента, так как в EM непосредственно относился к этому параметру блочной модели.
Единицы измерения REM в CSS
Теперь рассмотрим, что такое единица измерения REM и как ею пользоваться. Первое упоминание о REM появилось в 2011 году в комментарии пользователя к статье немецкого разработчика Геррита ван Аакена об использовании пикселей в CSS–коде. Эта относительная единица по значению близка к EM, и его название переводится как «корневой EM», или Root Em. Поведение REM более предсказуемо. Применение этой единицы в верстке облегчает подсчет размеров элементов в различных частях кода, так как REM в CSS равняется значению размера шрифта, установленного для корневого элемента – тега HTML. Но чаще это значение добавляется также и в body, чтобы исключить ошибки с расчетами. Использование REM в CSS, если его значение не прописано в теге HTML, становится еще проще. 1 REM будет равняться стандартным 16 пикселям, как и в случае с EM, значение которого не установлено.
Споры об использовании REM в CSS. REM против EM
У REM и EM есть свои плюсы и минусы. Существует множество споров среди верстальщиков, какую относительную единицу измерения применять при написании кода. Есть мнение, что использование REM в CSS делает верстку менее модульной, а EM усложняют верстку и требует внимательного подхода и подсчетов. Каждый верстальщик в процессе работы сам выбирает для себя, какую единицу измерения и где применять. Но на начальном этапе предпочтительнее все же пиксели. EM предпочтительнее для элементов, свойства которых масштабируются исходя из font-size. В остальных случаях лучше подойдут REM.
Применение REM в заголовках
Рассмотрим, как будут меняться заголовки текстов (теги h2–h6), если их прописать в REM. Допустим, что у заголовка есть поля вокруг него – padding, фон и указанный размер шрифта. Если нужно будет увеличить заголовок, то пространство между краями элемента сократится, поэтому padding придется переопределять. Но тогда может возникнуть проблема с тем, что все элементы просто перестанут помещаться на странице. Но есть задать размер шрифта в пикселях, а затем в настройках браузера попробовать его изменить на более крупный, ничего не произойдет. При употреблении REM он будет увеличиваться и уменьшаться в зависимости от настроек пользователя.
Ограничения Root Em
REM помогает создавать каскадные таблицы с различным font-size для заголовков и абзацев. Он значительно упрощает верстку, так как не нужно изменять код полностью – достаточно поправить размер шрифта в теге html. Существует также ограничение в использовании этой единицы. В старых версиях браузеров Opera и IE и в некоторых браузерах для Android они до сих пор не поддерживаются. Поэтому разработчики вынуждены использовать пиксели в качестве запасного варианта и писать двойной код. Современные браузеры будут считывать строчки с размером шрифта в пикселях и переводить их в REM, а устаревшие просто не увидят код с неизвестной им единицей измерения. Но если забыть об этом и начать разрабатывать сайт под какой-то определенный экран, тогда можно потерять множество пользователей, которые просто не смогут воспринять контент, сломавшийся из-за использования REM или EM.
Новые способы задать размер текста
В списке единиц размера в CSS сейчас находятся не только вышеперечисленные варианты. Появились и новинки:
- VW – равна 1/100 ширины браузера.
- VMIN – 1/100 меньшей стороны окна браузера.
- VMAX – 1/100 большей стороны окна браузера.
- VH – равна 1/100 длины браузера.
- EX – зависит от высоты буквы «х» в нижнем регистре.
- CH – рассчитывается в зависимости от символа «0» в шрифте текущего элемента.
Большинство этих вариантов также используются для дизайна сайтов с гибкой версткой, где размер контейнера измеряется в зависимости от размера окна браузера. Но для удобного масштабирования страницы обычно достаточно EM или REM.
Pt в Px конвертер | px, em, pt, процент
Simple CSS Units — это бесплатный инструмент для веб-дизайнеров и фронтенд-разработчиков, упрощающий процесс преобразования CSS-единиц. Просто введите единицы измерения в поля ниже и наблюдайте, как конвертируются единицы в реальном времени.
Конвертер размера шрифта— Pt в Px, EMS и диаграмма процентов
Хотите скачать копию? Откройте эту общую таблицу Google.| 12 пикселей | 9 пунктов | 0,75 эм | 75% |
| 13 пикселей | 10pt | 0.81em | 81% |
| 14 пикселей | 11pt | 0,88em | 88% |
| 15 пикселей | 11pt | 0.94em | 94% |
| 16 пикселей | 12 точек | 1em | 100% |
| 17 пикселей | 13pt | 1.06em | 106% |
| 18 пикселей | 14pt | 1.13em | 113% |
| 19 пикселей | 14pt | 1.19em | 119% |
| 20 пикселей | 15 точек | 1.25em | 125% |
| 21 пикс. | 16pt | 1,31em | 131% |
| 22 пикс. | 17pt | 1,38em | 138% |
| 23 пикс. | 17pt | 1.44em | 144% |
| 24 пикс. | 18pt | 1.5em | 150% |
| 25 пикселей | 19pt | 1.56em | 156% |
| 26 пикселей | 20 пунктов | 1.63em | 163% |
| 27 пикселей | 20 пунктов | 1.69em | 169% |
| 28 пикселей | 21pt | 1,75 эм | 175% |
| 29 пикселей | 22pt | 1.81em | 181% |
| 30 пикселей | 23pt | 1.88em | 188% |
| 31 пикс. | 23pt | 1.94em | 194% |
| 32 пикс. | 24pt | 2em | 200% |
| 33 пикс. | 25pt | 2.06em | 206% |
| 34 пикс. | 26pt | 2.13em | 213% |
| 35 пикселей | 26pt | 2.19em | 219% |
| 36 пикселей | 27pt | 2.25em | 225% |
| 37 пикселей | 28pt | 2.31em | 231% |
| 38 пикселей | 29pt | 2.38em | 238% |
| 39 пикселей | 29pt | 2.44em | 244% |
| 40 пикселей | 30pt | 2,50 эм | 250% |
| 41 пикс. | 31pt | 2,56em | 256% |
| 42 пикс. | 32pt | 2.63em | 263% |
| 43 пикс. | 32pt | 2.69em | 269% |
| 44 пикс. | 33pt | 2,75 эм | 275% |
| 45 пикселей | 34pt | 2,81 эм | 281% |
| 46 пикселей | 35pt | 2.88em | 288% |
| 47 пикселей | 35pt | 2.94em | 294% |
| 48 пикселей | 36pt | 3em | 300% |
EM против REM против PX.Что вам следует использовать?
Споры велись много раз — какие единицы измерения мы должны использовать в нашем CSS?
Мы, как и многие другие [1] [2] , были готовы отказаться от REM и вернуться к любимому пикселю. Мы потеряли понимание того, почему мы вообще приняли использование быстрых снарядов. Проблема не только в размерах шрифтов, но и в доступности.
TL; DR:
- Пиксели невежественны, не используйте их.
- Используйте REM для определения размеров и расстояния.
- Используйте EM для медиа-запросов.
пикселей
пикселей (пикселей) — это то, к чему мы все привыкли с годами. Все знают, что такое пиксель (хотя размер пикселя не всегда одинаков, но это на другой день). Всем комфортно использовать пиксели. Их легко перевести. Дизайнеры обычно работают с пикселями, поэтому размеры можно легко взять прямо из Photoshop прямо в сборку.
Так что не так с пикселями?
Доступность
Я большой сторонник доступности в Интернете.В любой момент я бы предпочел доступность «красивой».
Если вы устанавливаете все размеры шрифта, размеры элементов и интервалы в пикселях, вы не относитесь к конечному пользователю с уважением.
В большинстве браузеров пользователь может установить для своего браузера размер шрифта по умолчанию, отличный от размера по умолчанию (обычно 16 пикселей). Если пользователь устанавливает по умолчанию 20 пикселей, все размеры шрифтов должны масштабироваться соответствующим образом.
Однако, если веб-сайт явно устанавливает размер шрифта в пикселях, заголовок, установленный на 30 пикселей, всегда будет 30 пикселей.Это может показаться отличным с точки зрения дизайнера / разработчика, но вы не пользователь, перестаньте создавать сайты для себя.
К счастью, установка размеров шрифта в пикселях не полностью нарушает доступность. Пользователь по-прежнему может увеличивать и уменьшать масштаб с помощью ctrl плюс +/- (cmd вместо ctrl в OS X). Однако мы можем добиться большего.
REM
Если вы хоть как-то знакомы с миром веб-дизайна, вы, несомненно, слышали о REM. В противном случае REM-файлы — это способ установки размеров шрифта на основе размера шрифта корневого элемента HTML.Они также позволяют быстро масштабировать весь проект, изменяя размер корневого шрифта (например, при определенном медиа-запросе / размере экрана).
«Единица [REM] представляет размер шрифта корневого элемента (например, размер шрифта элемента). Когда он используется в font-size этого корневого элемента, он представляет его начальное значение ». [3]
Как рассчитать PX из REM
Простой и наиболее распространенный пример: размер шрифта html установлен на 10 пикселей, абзац установлен на 1.6rem — 1.6rem * 10px = 16px.
Установка размера корневого шрифта 10 пикселей — самый распространенный сценарий, когда я вижу людей, использующих REM. Он позволяет быстро преобразовать значения пикселей в значения REM, просто разделив число на 10.
Однако установка базового размера шрифта в пикселях по-прежнему вызывает ту же проблему, что и в примере с пикселями выше. Доступность отменена.
Хотя REM определенно имеют свое применение, я готов поспорить, что большинство людей используют REM, потому что они кажутся более холодными, чем пиксели.Я редко вижу проект, в котором кто-то действительно меняет размер шрифта корневого HTML в зависимости от размера экрана; и это правильно. Если у вас нет очень тяжелого типографского дизайна, вы вряд ли захотите масштабировать все сразу.
Итак, как мы можем исправить нашу ошибку в доступности?
Установите размер шрифта корневого HTML в процентах. Это процент от размера шрифта браузера по умолчанию. Типичный метод — установить размер шрифта HTML на 62,5%. Это потому, что 62,5% от 16 пикселей (типичный размер шрифта браузера по умолчанию) составляет 10 пикселей.Это все равно будет 1.6rem = 16px. Теперь это означает, что если размер шрифта в браузере пользователя по умолчанию изменяется, например, на 20 пикселей, 1.6rem теперь будет равняться 20 пикселей. Так что, если вашему пользователю нужны шрифты большего размера, позвольте им. Счастливый дизайнер. Счастливый разработчик. Со всеми числами по-прежнему легко работать.
Идеальным сценарием было бы оставить размер шрифта HTML равным 100%, но это немного усложняет вычисления. Например, 16 пикселей теперь составляет 1 бэр, 20 пикселей — 1,25 бэр, 24 пикселя — 1,5 бэр и т. Д.
Sass / SCSS спешат на помощь
Вычислить все эти числа в уме было бы довольно много времени.К счастью, если вы используете Sass / SCSS, LESS или любой другой препроцессор CSS, вам не о чем беспокоиться. Вы можете использовать функции, чтобы рассчитать эти вещи за вас.
А как насчет ЭМ?
EM изначально работают аналогично REM, пока не доходит до вложенности. Я никогда не был поклонником EM, особенно когда дело касается размеров шрифта. Например, возьмите div с размером шрифта 2em, затем добавьте абзац с размером шрифта 2em. Размер шрифта этого абзаца теперь составляет 2 мс относительно div.Я быстро теряю математику и размер, и это быстро становится неуправляемым. Это то, что решает REM — размер всегда относится к корню.
А как насчет медиа-запросов?
Итак, мы установили, что использование значений пикселей переопределяет настройки браузера по умолчанию, поэтому лучше всего просто преобразовать все размеры пикселей в REM, не так ли? Не совсем.
В этом сообщении блога освещены некоторые ключевые различия между использованием пикселей, EM и REM в медиа-запросах (https: // zellwk.com / blog / media-query-units /). Пойдите, прочтите, а затем вернитесь.
Таким образом, и пиксели, и REM для медиа-запросов не работают в различных браузерах при использовании масштабирования браузера, и EM — лучший вариант, который у нас есть. На данный момент REM не работают в гораздо большей степени, чем пиксели, поэтому мы полностью отбросим их.
Но все же становится немного сложнее. И EM, и пиксели имеют свои недостатки с медиа-запросами, когда дело доходит до разницы в десятичном разряде этой единицы. Если вы используете мультимедийные запросы как минимальной, так и максимальной ширины в одном блоке кода, у вас будут плохие времена, как только пользователь начнет изменять масштаб браузера или размер шрифта по умолчанию.
Вот несколько примеров:
Мы используем 6 знаков после запятой, потому что некоторые браузеры не показывают разницы между 2-5.d.p.
Для большей ясности мы используем размер шрифта 10 пикселей на основной части, чтобы сделать математику более понятной.
Пример 1. Масштаб браузера установлен на 100%, ширина браузера установлена на 640 пикселей
min-width: 64em = Попадание max-width: 63.99em = отсутствует max-width: 63.999999em = Hit min-width: 640px = Hit max-width: 639px = отсутствует max-width: 639.999999px = Miss
Пример 1b: Масштаб браузера установлен на 100%, ширина браузера установлена на 639 пикселей
min-width: 64em = отсутствует максимальная ширина: 63.99em = Hit max-width: 63.999999em = Hit min-width: 640px = отсутствует max-width: 639px = Hit max-width: 639.999999px = Hit
Итак, мы не можем использовать 6dp для EM, потому что он выполняет оба медиа-запроса.
Пример 2: Масштаб браузера установлен на 110%, ширина браузера установлена на 704 пикселя (поскольку 640 пикселей * 110% = 704 пикселя)
min-width: 64em = отсутствует max-width: 63.99em = отсутствует max-width: 63.999999em = Hit min-width: 640px = отсутствует max-width: 639px = отсутствует max-width: 639.999999px = Hit
Пример 2b: Масштаб браузера установлен на 110%, ширина браузера установлена на 705 пикселей
min-width: 64em = Попадание максимальная ширина: 63.99em = Мисс max-width: 63.999999em = отсутствует min-width: 640px = Hit max-width: 639px = отсутствует max-width: 639.999999px = Miss
Итак, мы не можем использовать 2dp для EM. Итак, все, что нам осталось на данном этапе, — это пиксели с разрешением 6 точек на дюйм. Это работает с масштабированием браузера. Однако…
Пример 3: Масштаб браузера установлен на 100%, размер шрифта браузера установлен на 20 пикселей, ширина браузера установлена на 800 (поскольку 640 * 125% = 800)
min-width: 64em = Попадание max-width: 63.99em = отсутствует max-width: 63.999999em = Hit
Итак, 6dp EM все еще отсутствуют.И мы вообще не можем использовать пиксели для медиа-запросов, потому что они по-прежнему работают с разрешением 640/639 пикселей, потому что игнорируют EM / REM.
Так что же делать?
К сожалению, ответа нет. Пока браузеры не решат проблемы с округлением, мы немного застряли.
Самый простой приемлемый вариант — никогда не создавать перекрытия минимальной и максимальной ширины в одном блоке. Пример:
body {
@media screen и (max-width: 63.99em) {
фон: синий;
}
@media screen и (min-width: 64em) {
фон: синий;
}
} Проблема с вышеизложенным заключается в том, что существуют определенные сценарии, в которых оба медиа-запроса попадают или игнорируются.Так что безопаснее было бы написать что-то вроде:
body {
фон: синий;
@media screen и (min-width: 64em) {
фон: синий;
}
} Почему нет настоящего решения? Я не верю, что достаточно людей заботится. Любая статистика, говорящая о том, что люди не меняют размер шрифта браузера по умолчанию, определенно искажена. Параметры в Chrome для изменения размера шрифта по умолчанию теперь очень скрыты в расширенных параметрах браузера.
Подводные камни
У этого подхода есть несколько подводных камней:
- Если вы привыкли писать медиа-запросы с минимальной и максимальной шириной в одном блоке кода, это займет больше времени.
- Это увеличивает сложность, поскольку вам придется переопределить CSS в том или ином направлении, вместо того, чтобы указывать браузеру использовать вариант A или B.
- Увеличивает размер файла из-за этих переопределений. Немного, но об этом стоит подумать.
В зависимости от проекта, кто его разрабатывает, и различных других факторов, таких как бюджет проекта (здесь мы должны быть реалистами), пиксели могут быть проще и быстрее. Также может быть проще и быстрее игнорировать доступность.
Помните, для кого вы создаете веб-сайты.
Также стоит отметить, что это сообщение в блоге актуально на момент написания, но с постоянным обновлением того, как работают браузеры, эта проблема может уйти в прошлое.
- Просто используйте пиксели
- R.I.P. REM, Viva CSS Reference Pixel!
- Длина — Сеть разработчиков Mozilla
в адаптивном дизайне: px vs. pt vs.em против процентов?
Как фронтенд-разработчик, мне нравится работать с CSS. В последнее время я много работал с адаптивным дизайном, и, как я уже отмечал в предыдущем посте о разработке для мобильных устройств, нужно помнить о форматах номеров телефонов. Еще одна вещь, о которой следует помнить при разработке для мобильных устройств, — это размер шрифта CSS.
пикселей (пикселей) как размер шрифта CSS
Пиксели имеют фиксированный размер. Один пиксель обычно равен одной точке на экране.Поскольку пиксели имеют фиксированный размер, они не меняются. Это может быть как хорошо, так и плохо. Он позволяет веб-разработчикам создавать наиболее точные или «точные до пикселя» изображения веб-дизайна. Однако, поскольку они имеют фиксированный размер, они не увеличиваются и не уменьшаются. Это означает, что шрифты будут отображаться меньше на экране с более высоким разрешением, чем на экране с более низким разрешением.
пунктов (pt) как размер шрифта CSS
Очки — это единица измерения, используемая в печати. Баллы основаны на дюйме на линейке, а один дюйм равен 72 точкам.Этот модуль также сильно различается между разными браузерами и экранами при использовании в CSS. Очки очень хороши для настройки CSS для печати, чтобы решить эту проблему с браузером, но в остальном я бы не рекомендовал использовать очки для разработки веб-сайтов.
Em как размер шрифта CSS
Ems не имеют фиксированных размеров. Они масштабируемы, и по этой причине em хорошо подходят для разработки мобильных веб-сайтов. Ems относятся к размеру шрифта, установленному в CSS. Если у вас нет одного набора в CSS, то 1 em обычно будет равняться 16px, что обычно является размером шрифта по умолчанию в браузерах.Одна плохая вещь в ems заключается в том, что они каскадируются, что немного усложняет пиксельный дизайн. Например, предположим, что размер шрифта основного текста установлен на 16 пикселей, а размер шрифта родительского div — 1,2 em. Если у вас есть абзац в этом div с font-size: 1.2em , тогда у вас будет шрифт в этом теге p, который составляет 1,2 em из 1,2 em шрифта 16px или примерно 23px в теге p вместо ~ 19px, чего и следовало ожидать.
Процент (%) как размер шрифта CSS
Проценты также масштабируемы как ems.Однако 100% равно текущему размеру шрифта. Подумайте об этом так: 1.5em в 1,5 раза больше , а 150% — это 150 процентов от размера шрифта. Проценты также хороши для мобильной разработки из-за их масштабируемости. Тем не менее, они действительно каскадируются, как em.
За исключением очков, все вышеперечисленные модули являются хорошим выбором для интерфейсной веб-разработки. Ems и проц особенно хороши для мобильной веб-разработки.
Автор: Blueprint
пикселей, pt, em 表 |菜鸟 教程
pt (точка ， 磅) ： 是 一个 物理 长度 单位 ， 指 的 是 72 分 之一 英寸。
пикселей (пиксель ， 像素) ： 是 一个 虚拟 长度 单位 ， 是 计算机 系统 的 数字 化 图像 长度 单位 ， 如果 px 要 换算 成 ， 需要 指定 精度 DPI (точек на дюйм ， 每 英寸 数) ， 在 扫描打印 时 一般 都有 DPI 可选 。Windows 系统 默认 是 96 точек на дюйм ， Apple 系统 默认 是 72 точек на дюйм。
em (相对 长度 单位 ， 相 对于 当前 对象 内 文本 的 字体 尺寸) ： 是 一个 相对 长度 单位 ， 最初 是 指 字母 M 的 宽度 ， 故名 em。 用法 类似， 如 ： 0.8em, 1.2em, 2em 等。 通常 1em = 16px。
字号 ： 是 中文 字库 中 特有 的 一种 单位 ， 以 中文 代号 表示 特定 的 磅 值 pt ， 便于 记忆 、 表述。
pt 和 px 的 换算 公式 可以 根据 pt 的 定义 得出:
pt = 1/72 (英寸), px = 1 / dpi (英寸)
因此 pt = px * dpi / 72
以 Windows 下 的 96dpi 来 计算 ， 1 pt = px * 96/72 = px * 4/3
| 字号 | пт | пикселей | в.п. |
|---|---|---|---|
初 号 | 42pt | 56px | 3.5em |
小 初 | 36 пунктов | 48px | 3em |
34pt | 45px | 2,75 эм | |
32pt | 42px | 2.55em | |
30pt | 40px | 2.45em | |
29pt | 38px | 2.35em | |
28pt | 37px | 2.3em | |
27pt | 36px | 2.25em | |
一号 | 26pt | 35px | 2.2em |
25 пунктов | 34px | 2.125em | |
小 一 | 24pt | 32px | 2em |
二号 | 22pt | 29px | 1.8em |
20 пунктов | 26px | 1.6em | |
小 二 | 18pt | 24px | 1.5em |
17pt | 23px | 1.45em | |
三号 | 16 пунктов | 22px | 1.4em |
小 三 | 15 пунктов | 21px | 1.3em |
14,5 пт | 20 пикселей | 1.25em | |
四号 | 14 пунктов | 19px | 1.2em |
13,5 пт | 18px | 1,125em | |
13pt | 17px | 1.05em | |
小 四 | 12 пунктов | 16px | 1em |
11 п. | 15 пикселей | 0.95em | |
五号 | 10.5pt | 14px | 0,875em |
10 пунктов | 13 пикселей | 0.8em | |
小五 | 9pt | 12px | 0.75em |
8pt | 11px | 0,7 эм | |
六号 | 7.5pt | 10px | 0,625em |
7pt | 9px | 0.55em | |
小 六 | 6.5pt | 8px | 0,5 эм |
七号 | 5.5pt | 7px | 0,4375em |
八号 | 5 пунктов | 6px | 0.375em |
%, px, em, cm, pt, ex, in, mm, pc
CSS поддерживает следующие типы единиц измерения CSS, такие как пиксели, проценты, дюймы и т. Д.
Измерение CSS Два типа: абсолютное измерение и относительное измерение.
CSS Абсолютное измерение
Браузер относительно измеряет проценты, em и rem.
Процент (%)
Измерение процента (%) относительно браузера или другого элемента.Используйте для создания адаптивного дизайна веб-сайта для установки ширины высоты содержимого изображения и ширины.
.heading {
ширина: 30%;
высота строки: 150%;
} выс.
единица em относительно мера использования для шрифтов типографики и свойств, связанных с элементами, набор полей, отступов и т. Д.
.heading {
размер шрифта: 2em;
} рем
Единица измеренияrem относительно такая же, как em, но относительно: корневой селектор.Не поддерживает браузер Safari или IE.
: root {
размер шрифта: 3rem; // размер шрифта в 3 раза больше шрифта абзаца по умолчанию
} Запустите … »
Относительное измерение CSS
В остальном все измерения являются абсолютными, работают независимо. давай проверим это,
Сантиметра (см)
Сантиметр (см) — еще одна единица измерения CSS.Используется для «печатной» таблицы стилей типа носителя. Сантиметры (см) зависят от разрешения и размера монитора.
: root {
размер шрифта: 1см; // 1 см = 37,79 пикселей
} Символ (канал)
Блоксимволов (ch) используется для настройки монохромного шрифта. особенно для изменения семейства шрифтов. Поддерживаются не все браузеры.
из
em — это единица измерения высоты шрифта по оси x.x-height определяется для строчного шрифта. низкий приоритет для использования этого электронного модуля.
дюймов (дюймов)
Дюймы (дюймы) совпадают с сантиметрами (см) и используются для «печатной» таблицы стилей типа носителя.
: root {
размер шрифта: 1 дюйм; // 1 дюйм = 96 пикселей
} Миллиметры (мм)
Миллиметры (мм) определяют меру в миллиметрах. Используется для «экранной» таблицы стилей медиа-типа.
: root {
размер шрифта: 1 мм; // 1 мм = 3,77 пикселя и 10 мм = 1 см
} Пиксель (px)
Pixel (px) — наиболее удобный для измерения пиксель экрана браузера. Пиксель (пиксель) нормализует размер для всех устройств и отображает истинное значение.
: root {
размер шрифта: 20 пикселей; // 20 пикселей = 0,52 см
} Окно просмотра (vh & vw)
Модулиvh и vw определяют отзывчивый шрифт типографики для разных типов порта просмотра.Не поддерживает все браузеры.
Очки (pt)
Пункты (pt) используются для физических измерений. Использовать для набора таблица стилей СМИ типа «печать».
Pica (шт)
ЕдиницаPica (pc) такая же, как и Point (pt), только 12pt соответствует 1pc.
Значение цвета
Поддержка CSS после поддержки различных цветовых кодов, таких как шестнадцатеричный цвет, цвет RGB, название цвета и т. Д..
| Значение | Описание |
|---|---|
| #XXXXXXX | Десятичный код в шестнадцатеричном формате |
| имя_цвета | название цвета (например, оранжевый) |
| RGB (x%, x%, x%) | Значение красного, зеленого, синего в процентах. |