Разница в точках и пикселях
Обновлено: 21.11.2024
Существует несколько типов пикселей. На этой диаграмме показано:
Интернет, написанный на CSS, имеет веб-пиксели (px)
Вместо этого iOS использует термин баллы (pts)
Android использует термин пиксели, не зависящие от плотности (dps)
Все эти вещи примерно одинаковы. Но это не настоящие пиксели разрешения экрана, поскольку мы привыкли думать о пикселях с точки зрения традиционных дисплеев или разрешений точек при печати.
Это волшебные пиксели, основанные на предположении, что дисплеев с высоким разрешением не существует. Они настроены на традиционное базовое разрешение экрана около 160 пикселей на дюйм.
При разработке дизайна для Интернета, iOS и Android мы используем единицу измерения в пикселях, которая имитирует изображение на старом дисплее, где один пиксель дизайна на самом деле означает один пиксель разрешения экрана.
Поскольку современные устройства имеют экраны с высоким разрешением, мы по-прежнему используем традиционные пиксели дизайна, а устройство автоматически подгоняет работу под новый дисплей с более высокой плотностью.
" data-lightbox-theme="dark" > Посмотреть в полном размере
А-а… так пиксель не пиксель
Представьте себе один черный квадрат размером 1 x 1 пиксель в 2008 году. Пиксель означает пиксель. Жизнь была легкой.
Затем появились мобильные экраны с высоким разрешением, такие как Retina Display от Apple в 2010 году.
iPhone 4 с дисплеем Retina отображал разрешение 640 x 960 пикселей на том же физическом экране, что и предыдущий iPhone 3 – только 320 x 480 пикселей.
Это означало, что количество пикселей на дюйм (PPI) удвоилось со 163 до 326 PPI.
Чтобы приспособиться к высокой плотности пикселей на экране и не сводить дизайнеров и разработчиков с ума из-за того, что их работа отображается в разных размерах на экранах с разным разрешением, Apple вводит логическое разрешение.
Логическое разрешение — это, по сути, то, каким было бы разрешение устройства, если бы оно не имело высокого разрешения. Этот базовый уровень составляет примерно 163 пикселя на дюйм.
Apple использует термин "точка" для описания измерения с логическим разрешением.
Это означает, что линия длиной 163 точки равна 163 пикселям на экране с разрешением 163 пикселя на дюйм.
Та же 163-точечная линия на дисплее с высоким разрешением (326 пикселей на дюйм) будет использовать вдвое больше пикселей, но останется той же длины.
Подводя итог, можно сказать, что логическое разрешение Apple определяется в баллах. Это базовая единица измерения при программировании программного обеспечения Apple.
например. iPhone XS
Логическое разрешение = 375 x 812 точек
Разрешение экрана = 1125 x 2436 пикселей
Это означает, что при разработке для iOS дизайнер должен установить размер холста 375 x 812 точек.
Вместо термина "точка" компания Google разработала собственный термин "пиксели, не зависящие от плотности". Термин именно то, что он говорит.
Пиксель, не зависящий от плотности, – это размер элемента в пикселях на экране, который не зависит от плотности пикселей фактического разрешения экрана.
Android также использовал разрешение экрана 160 PPI по умолчанию.
Линия шириной 1,5 дюйма при размещении на экране с плотностью 160 пикселей будет занимать в общей сложности 240 пикселей на дисплее. Линия также 240 dp.
Если бы эта 1,5-дюймовая линия была помещена на экран с плотностью 320 пикселей, она заняла бы в общей сложности 480 пикселей на дисплее. Однако линия остается 240 dp.
Android также использует термин масштабируемые пиксели (sp) для выполнения той же функции, что и пиксели, не зависящие от плотности, но вместо этого для шрифтов. 1 sp технически равен 1 dp.
Интернет использует те же принципы, что и логическое разрешение и независимые от плотности пиксели.
Единицей измерения в Интернете являются пиксели. Но веб-пиксели на самом деле похожи на точки или пиксели, не зависящие от плотности.
Иногда эти веб-пиксели называются «эталонные пиксели CSS», «пиксели окна просмотра CSS» или «пиксели CSS». Они означают одно и то же (насколько я могу судить).
Пиксель — это один квадратный «элемент изображения» (отсюда пиксель), т. е. одна точка на вашем изображении. Изображение 10 x 10 состоит из набора пикселей в сетке шириной 10 и высотой 10 пикселей, что в сумме составляет 100 пикселей.
Точка (pt), с другой стороны, — это единица длины, обычно используемая для измерения высоты шрифта, но технически способная измерять любую длину. В приложениях 1 пт равна ровно 1/72 дюйма; в традиционной печати технически 72 pt – это 0,996264 дюйма, хотя я думаю, вам будет прощено округлить это значение!
Сколько пикселей = 1 пт, зависит от разрешения вашего изображения. Если разрешение вашего изображения составляет 72 ppi (пикселей на дюйм), то одна точка будет равна ровно одному пикселю.
Я бы также добавил, что dpi относится к печати, а ppi к отображению в пикселях. Если что-то имеет разрешение 72 dpi в фотошопе (или любом другом цифровом формате), оно может не быть 72 dpi при печати.
Кстати, пиксели не всегда квадратные.Если вы когда-либо создавали изображения для видео, обратите внимание, что у вас могут быть вертикальные прямоугольные пиксели или горизонтальные прямоугольные пиксели. Дополнительные сведения см. в разделе "Соотношение сторон пикселя".
@Lèsemajesté Вы можете сохранить изображение с любым разрешением на дюйм, и оно все равно будет иметь точно такую же информацию о пикселях. Изображение размером 100x100 пикселей будет иметь одинаковый размер на вашем экране независимо от того, с каким ppi вы сохраняете изображение - ppi вступает в игру только при печати изображения. Экраны отображают один пиксель изображения на одном физическом пикселе с плотностью пикселей, которая является индивидуальной для этого экрана (большой наружный экран имеет другое разрешение на дюйм, чем экран настольного компьютера или портативного мобильного устройства — одни и те же пиксели создают разный физический размер).
это не так. Пиксели — это несократимая атомарная единица без измерения. PPI — это флаг, установленный в программном обеспечении. RIP должен соблюдать инструкции относительно окончательного реального размера и игнорировать флаг PPI, встроенный в файл изображения. Когда мы создаем изображения с разрешением «300 dpi для печати», все, что мы делаем, — это обеспечиваем достаточное количество пикселей, чтобы RIP не приходилось добавлять или удалять пиксели для достижения желаемого целевого физического размера. Когда изображение растягивается, программное обеспечение эмулирует растяжение, добавляя пиксели. По этой же причине несколько странно называть пиксели квадратными.
Пункт – это физическая единица длины, используемая в типографике. Это равно 1/12 Пика, а 1 Пика = 1/6 дюйма. Таким образом, 1 pt = 1/72 дюйма.
Поэтому на дисплее с разрешением 72 пикселя на дюйм 1 точка = 1 пиксель.
В CSS
Пункт – это 1/72 дюйма, а пикс – 1/96 дюйма.
Поэтому пиксель равен 0,75 pt [источник] .
В CSS все несколько абстрагировано, поэтому единица измерения, такая как "pt", не обязательно равна одному пункту физического размера, особенно на экране, "in" не обязательно равна одному дюйму. по размеру и так далее. Даже «px» больше не обязательно имеет размер в один пиксель. В CSS все масштабируется, чтобы соответствовать виртуальному устройству с разрешением 96 пикселей на дюйм, просматриваемому с нормального расстояния чтения. На экранах и пиксельных устройствах, которые значительно отличаются от 96 пикселей на дюйм или которые не читаются с нормального расстояния чтения, единица пикселей будет масштабироваться с некоторым коэффициентом, а все остальные единицы сохраняют те же отношения к соответственно, то есть единица измерения in по-прежнему будет составлять 96 пикселей, а единица pt по-прежнему будет составлять 1/72 единицы измерения in.
В печати
В печатных изданиях точка традиционно составляла примерно от 1/67 дюйма до 1/72,5 дюйма.
Для цифровых носителей в настоящее время стало стандартом де-факто, что точка имеет размер точно 1/72 дюйма, хотя все еще существуют менее распространенные альтернативные измерения, которые немного отличаются от 1/72, но ненамного.
В печати вы обычно не измеряете в пикселях, потому что они представляют собой техническую информацию о целевом принтере или устройстве, которая не является абсолютным измерением. Например, рисунок может быть напечатан с разрешением 125, 300 или 1200 dpi и при этом иметь те же физические размеры.
Давайте подробнее рассмотрим, что такое пиксели и точки и как они используются с подписями электронной почты.
Что такое пиксель (px)?
Пиксель (пикс.) при разрешении 96 точек на дюйм (точек на дюйм) равен 0,2645835 миллиметра, 0,010416675 дюйма или 0,75 точки. Это измерение высоты шрифта в пикселях, которые видны на экране вашего компьютера. Таким образом, если шрифт имеет высоту 12 пикселей, это означает, что он занимает 12 пикселей на экране от верхней части буквы до нижней, что также включает символы, части которых находятся под направляющей линией, например символ «р».
Предпочтительнее использовать пиксели для расчета размеров шрифтов в подписях электронной почты, поскольку их нужно измерять на ЖК-экранах, а не физически. Поскольку все компьютеры и мобильные устройства имеют ЖК-экраны, в качестве единицы измерения имеет смысл использовать пиксели.
Что такое точка (pt)?
Точка (pt) равна 0,352778 миллиметра, 0,0138889 дюйма или 1,333 пикселя. Поскольку миллиметры и дюймы — это единицы измерения физических предметов, они не подходят для использования с компьютерными или мобильными приложениями, поскольку они не всегда представляют правильный размер из-за различий в разрешении экрана.
Некоторые почтовые клиенты, такие как Outlook, по-прежнему используют точку в качестве измерения размера шрифта, когда речь идет о подписях электронной почты. Это довольно раздражает, потому что большинство подписей электронной почты в формате HTML создаются с использованием пикселей для размеров шрифта, потому что это веб-стандарт.
Таблица конверсии
| Точки | Пиксели |
|---|---|
| 6pt | 8px |
| 7pt | 9px |
| 7,5pt | 10px |
| 8pt | 11px |
| 9pt | 12px |
| 10pt | 13px |
| 10,5pt | 14px |
| 11pt | 15px |
| 12pt | 16px |
| 13pt | 17px |
| 13,5pt | 18px |
| 14pt | 19px |
| 14,5pt | 20px |
| 15pt< /td> | 21px |
| 16pt | 22px |
| 17pt | < td >23px|
| 18pt | 24px |
| 20pt | 26px< /td> |
| 22pt | 29px |
| 24pt | 32px | < /tr>
| 26pt | 35px |
| 27pt | 36px | 28pt | 37px |
| 29pt | 38px | 30pt | 40px
Почему у шрифтов разница между пикселями и точками?Единицы измерения размера шрифтов со временем сильно изменились. Пункты были основным (и единственным) способом измерения размера шрифта на бумаге с тех пор, как он был впервые установлен в 1500-х годах. Экраны компьютеров (и мобильных устройств) состоят из множества крошечных светодиодов, которые в терминологии программного обеспечения называются пикселями. У одних мониторов их больше, у других меньше. Это означает, что измерение «точек» больше не подходит, поскольку 1 точка была привязана к 0,352 миллиметра, а физические единицы измерения не работают на экранах компьютеров. С тех пор, как в начале 80-х появились первые персональные компьютеры, мы нашли более новый и удобный способ измерения размера шрифта, поскольку разрешения мониторов сильно различались. Цифровой способ измерения размера шрифта — в пикселях. Некоторые текстовые процессоры, такие как Microsoft Word, по-прежнему используют точки в качестве единиц измерения для шрифтов. Это связано с тем, что в некоторых случаях документы распечатываются и преобразуются в физические документы, поэтому имеет смысл использовать баллы. Однако не имеет смысла использовать баллы в качестве единицы измерения для почтовых приложений, таких как Microsoft Outlook, потому что… ну… это электронная почта, она же электронная почта, но она все еще используется по сей день. К счастью, существует стандартное преобразование точек в пиксели, что упрощает жизнь. Наша рекомендацияМы зарабатываем на жизнь созданием электронных подписей, поэтому у нас есть опыт в выборе размеров шрифтов для электронных подписей и наилучшем способе их измерения. Если вы создаете подпись электронной почты и не уверены, следует ли использовать точки или пиксели, мы рекомендуем всегда использовать пиксель в качестве формы измерения шрифта для подписей электронной почты, особенно если они созданы в HTML. Это обеспечит максимальную совместимость между различными почтовыми клиентами, а значит, ваша подпись всегда будет иметь правильный размер шрифта. Хотите создать подпись электронной почты с нуля? Почему бы не попробовать наш бесплатный генератор подписей электронной почты, который может помочь вам со всем процессом от начала до конца.
Один ответ на вопрос «Разница между размерами шрифта в пикселях (Px) и точках (Pt) в подписях электронной почты»спасибо, очень понятный пост Оставить ответ Отменить ответ
Стань инсайдером Gimmio!Будьте первыми, кто будет получать уведомления о новейших БЕСПЛАТНЫХ ресурсах, последних новостях и эксклюзивных рекламных акциях прямо на ваш почтовый ящик! Должен ли я при создании HTML-страницы указывать такие элементы, как поля, с помощью пикселей или точек в CSS? Считается ли один из них лучшим, чем другой? Какие преимущества или недостатки у одного из них? @ceejayoz: Ну, % для маржи не очень хорошо работает. Хотя что они? Такого еще не видел. @Mehrdrad — em — это единица измерения, основанная на размере буквы «m» в текущем шрифте. Указание размеров в em позволяет вам иметь размер на основе размера шрифта, а это означает, что вы можете изменить шрифт, и макет изменится соответственно. Я до сих пор не видел ни одного ответа о том, как браузеры выполняют масштабирование. Для браузера пиксель является относительной единицей измерения, поэтому я считаю половину ответов ниже ерундой. Если пиксель является относительной единицей измерения, зачем использовать (или не использовать) его над точкой?Меняются ли правила масштабирования? Обеспечивает ли использование того или другого лучшего справочного материала? @pst: обычно, когда пользователь знает больше о правильном ответе, он публикует его как ответ, чтобы все могли извлечь выгоду. 9 ответов 9Используйте px или em
ЕЩЕ СТАТЬИ
(Комментарий ниже)
Если это из настоящей ссылки? Затем в этой статье говорится очень неточное «насколько пиксели абсолютно точны на мониторах для определения размера шрифта», что явно неверно. Представьте себе 1) iPhone/iPad/Android с динамическим масштабированием 2) способность любого современного браузера выполнять полное масштабирование. Таким образом, у меня есть сомнения по поводу использования его в качестве источника. Основные правила: Пиксели для отображения на экране; точек для печати. 'em' или '%' (и менее известный rem ) лучше подходят для более гибкого макета. em — это единица измерения, основанная на размере буквы "m" в текущем шрифте. Указание размеров в em позволяет вам иметь размер на основе размера шрифта, а это означает, что вы можете изменить шрифт, и макет изменится соответственно. Но во многих случаях вам нужно использовать фиксированный размер. В этом случае лучше всего подойдет px, так как большинство веб-страниц отображаются на пиксельном экране. Но если вы планируете много печатать страницу, у вас может быть таблица стилей для печати с точечным макетом. Как правило, я бы рекомендовал em, а не px или pt . Если вы используете px , это связано с тем, что на вашей странице есть элементы, размер которых измеряется в пикселях, например изображения, которым должна соответствовать остальная часть макета. В этом случае, поскольку изображения представлены в пикселях, то же самое должны делать и таблицы стилей. Кроме того, поскольку баллы являются единицей измерения печати, нет никакой гарантии, как они будут отображаться на экране: пиксели основаны на экране, поэтому они придадут вам гораздо более согласованный внешний вид на экране в разных браузерах и на разных платформах. Какая разница (использовать пиксель вместо точки), если большинство веб-страниц отображаются на пиксельных экранах, если DPI не гарантированный или постоянный? обычно я бы рекомендовал em вместо px или pt . Если вы используете px , это связано с тем, что на вашей странице есть элементы, размер которых измеряется в пикселях, например изображения, которым должна соответствовать остальная часть макета. В этом случае, поскольку изображения представлены в пикселях, то же самое должны делать и таблицы стилей. Кроме того, поскольку баллы являются единицей измерения печати, нет никакой гарантии, как они будут отображаться на экране: пиксели основаны на экране, поэтому они придадут вам гораздо более согласованный внешний вид на экране в разных браузерах и на разных платформах. небольшая поправка: буква em традиционно относилась к ширине металлического или деревянного блока, на котором помещалась заглавная буква «М». Хотя в наши дни в Интернете это относится к размеру шрифта по умолчанию. Кроме того, хотя верно то, что px – это размер экрана, а pt – печать, ни один из них не обязательно более согласован, чем другой, в разных браузерах или платформах, поскольку оба они являются виртуальными измерениями. То есть 1 пиксель НЕ ДОЛЖЕН означать один физический пиксель на экране. Не используйте ems, если вы не являетесь приверженцем чистоты CSS. Пиксели отлично отображаются и масштабируются во всех распространенных браузерах.
Забавно, что все отвечают "пиксель или %/em", а не "пиксель или точки". Я не знал, что между ними есть разница.
Согласно тому, что я читал, не гарантируется, что это будет 1/72 дюйма, за исключением случаев, когда они распечатаны. Найдите "дополнительную информацию". Не используйте ems, если вы не являетесь приверженцем чистоты CSS. Пиксели отлично отображаются и масштабируются во всех распространенных браузерах. Любой, кто советует вам использовать пиксели, ошибается. Пиксели работают нормально, но они просто не требуются. Всегда! Баллы — это прекрасный способ указать абсолютную меру, а для масштаба, с которым мы обычно работаем в Интернете, они чаще, чем предпочтительные меры. Кроме точек, есть еще пика, дюйм, сантиметр и так далее. Выбор одного из них во многом похож на вопрос: «Должен ли я измерять эту комнату в футах или дюймах?» Пусть здравый смысл будет вашим проводником. Все они выполнят свою работу. Em, который упоминался в некоторых ответах, следует зарезервировать для тех случаев, когда это уместно. Другими словами, «когда эта вещь масштабируется, я хочу, чтобы эта другая вещь масштабировалась». Вот для чего нужны относительные меры. Я знаю, что это выходит за рамки вашего первоначального вопроса, но мне пришлось обратиться к некоторым глупостям о «всегда использовать em». Кстати, пиксели не равны физическим пикселям. Сегодня px в таблице стилей означает 1/96 дюйма. Вот почему я говорю, не используйте их. Большинство людей этого не знают. Они используют их, думая, что указывают настоящие пиксели. Я не могу воспринимать этих людей всерьез, если это очевидно (хотя я не виню людей, я виню запутанный характер положения вещей, поэтому я выступаю за исчезновение пикселей). Кроме того, если бы пиксели действительно означали пиксели, это был бы ужасный способ указать размеры. Поговорите о том, что вещи будут случайным образом уменьшаться и увеличиваться в зависимости от неконтролируемых произвольных разрешений экрана. Ой! Держитесь подальше от пикселей. На практике они работают, но только благодаря скрытым усилиям разработчиков браузеров и операционных систем. Теоретически это ужасно двусмысленный способ указать ваши намерения. Ответ Джона Б. выше является лучшим и наиболее точным. Я просто хотел указать на возможную путаницу, вызванную ответом выше. «Эм» в типографике — это ширина буквы «м» в выбранном вами шрифте. Чтобы указать высоту шрифта, печатники/наборщики использовали «высоту x», которая представляет собой высоту нижнего регистра x для шрифта. Как отмечает Джон, pt — это фиксированная единица измерения, равная 1/72 дюйма. Поскольку плотность пикселей у мониторов разная (72 / дюйм, 96 / дюйм. ), обычно это не лучший способ масштабирования в HTML-документах. Эм напрямую относится к старой типографской единице и является отличным относительным показателем. По мере увеличения размера экрана размер шрифта увеличивается вместе с ним. Если вы используете em для полей, они масштабируются относительно размера шрифта, что обычно хорошо. Но для полей, отступов и всего, что не связано напрямую со шрифтом, лучше всего использовать rem или "относительный em". Лучший способ сделать это — изначально объявить размер шрифта по умолчанию для вашего тела или html-тега. Что-то вроде body font-size = 16px — хорошее место для начала. Затем везде в документе используйте em для текста и rem для всего остального. Или используйте проценты. Либо будет работать нормально. Как и в случае с em и rem, ваш % относится к исходному размеру шрифта 16px = 100%. Все в документе будет масштабироваться относительно исходной настройки размера шрифта 100 % и 16 пикселей. Таким образом, вы используете измерение в пикселях только один раз в документе.Это удобно, если вы позже захотите установить медиа-запросы, чтобы настроить размеры и поля для соответствия разной плотности пикселей на разных дисплеях устройств. Вам нужно только иметь запросы для этого одного начального объявления в теге body. Все остальное будет скорректировано относительно этого, и его не нужно будет менять. Читайте также:
|