Пикселей или пикселов: «Пикселов» VS «Пикселей» | Gamin

Как писать: пиксель или пиксел? Обсудим?: ru_designer — LiveJournal

?

Category:

• Литература
• Cancel

Poll #1617479 Пиксель или пиксел?

Open to: All, detailed results viewable to: All. Participants: 245

Как писать: пиксель или пиксел?

View Answers

Пиксель (пиксели, пикселей, пикселя…)

225(92.6%)

Пиксел (пикселы, пикселов, пиксела…)

18(7.4%)

Суть проблемы подробно изложил здесь. Если кратко, то есть ГОСТ, согласно которому нужно писать «пиксель», и есть справочник русского языка РАН, в котором на первом месте стоит «пиксел», а «пиксель» помечен, как разговорный и профессиональный.

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

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

Subscribe

• Одна из конкурсных работ ФКСР занявшая призовое 2 место

  К этой работе еще прилагался фирстиль на 45 страниц с деловой документацией, внешний вид сайта, наружная реклама, тв реклама…

• Разработка логотипа для наставнической сети mentor network

  Это один из вариантов, остальные в разработке. На livejournal впервые, пришол сюда за опытом и надеюсь за одыкватной критикой.…

• Логотип Анна Шураева.

  

  Свежий лого для Анны Шураевой, которая печет вкуснейшие торты на заказ. https://vk.com/id412900 Принятый вариант (первый), второй (под катом) -…

Photo

Hint http://pics.livejournal.com/igrick/pic/000r1edq

• Одна из конкурсных работ ФКСР занявшая призовое 2 место

  К этой работе еще прилагался фирстиль на 45 страниц с деловой документацией, внешний вид сайта, наружная реклама, тв реклама…

• Разработка логотипа для наставнической сети mentor network

  Это один из вариантов, остальные в разработке. На livejournal впервые, пришол сюда за опытом и надеюсь за одыкватной критикой.…

• Логотип Анна Шураева.

  Свежий лого для Анны Шураевой, которая печет вкуснейшие торты на заказ. https://vk.com/id412900 Принятый вариант (первый), второй (под катом) -…

Работа с цифровыми изображениями

Растровая графика Векторная графика Фрактальная графика 3D графика

 

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

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

У растрового изображения есть несколько характеристик. Самыми важными являются: разрешение, размер и цветовая модель. Иногда размер также называют разрешением и поэтому происходит путаница. Размер измеряется в Мп (мегапиксехах), а разрешение — dpi или ppi.

Разрешение — это количество пикселей на дюйм (ppi — pixel per inch) для описания отображения на экране или количество точек на дюйм (dpi — dot per inch) для печати изображений. Существует несколько устоявшихся правил: для публикации изображения в сети Интернет используют разрешение 72ppi, а для печати — 300dpi(ppi). Требования микростоков к изображениям — 300dpi, так как многие работы покупаются именно для печати.

Размер — общее количество пикселов в изображении, обычно измеряется в Мп (мегапикселах), это всего лишь результат умножения количества пикселов по высоте на количество пикселов по ширине изображения. То есть, если величина фотографии 2000х1500, то ее размером будет 2000*1500=3 000 000 пикселов или 3Мп. Для отправки на фотобанки размер изображения не должен быть меньше 4Мп, а в случае иллюстрации — не более 25Мп.

Цветовая модель — характеристика изображения, описывающая его представление на основе цветовых каналов. Мне известно 4 цветовые модели — RGB (красный, зеленый и синий каналы), CMYK (голубой, пурпурный, желтый и черный), LAB («светлота», красно-зеленый и сине-желтый) и Grayscale(оттенки серого). Все микростоки принимают растровую графику в цветовой модели RGB.

Редактирование изображений (лат. redactus — приведённый в порядок) — изменение оригинала изображения аналоговыми или цифровыми методами ретуширования (фр. retoucher — подрисовывать, подправлять).

Виды и цели редактирования изображений

1. Устранение недостатков изображений, техническая коррекция
   1. Цветокоррекция
   2. Изменение размера изображений
   3. Подавление шума
   4. Ретушь
   5. Расширение динамического диапазона изображения
2. Структурное редактирование цифровых изображений
   1. Коллажирование (монтаж)
   2. Обтравка
   3. Кадрирование
   4. Ориентация изображения
   5. Фильтры и спецэффекты
3. Подготовка фотографий к публикации в печати, на телевидении, в интернете.
   1. Изменение цветовых пространств (цветоделение)

Просмотр картинок

• Microsoft Office Picture Manager
• XnView
• ACDSee — нужна лицензия
• Cornice
• PhotoView — просмотр картинок (Freeware)
• Commander — просмотр и управление картинками (Freeware)
• FreeVimager
• IrfanView
• FastStone Image Viewer

Растровые редакторы для которых нужно покупать лицензию:

• Adobe Photoshop — самый популярный коммерческий собственнический редактор
  • Уроки по использованию Photoshop
• Adobe Fireworks
• Corel Photo-Paint
• Corel Painter
• Microsoft Paint
• Microsoft Photo Editor
• Krita

Растровые редакторы (бесплатные):

• GIMP — самый популярный свободный бесплатный редактор
• Tux Paint — ориентирован на детей от 3-х лет
• Paint.NET — требует установленного .NET 2.0
• PhotoFiltre
• XnView
• Hugin (панорамы)
• Picasa
• Artweaver
• Pixia FastStone Photo Resizer

Хранение фотографий

• Интернет-сервисы для хранения фотографий

Растровые графические on-line редакторы:

• SPLASHUP— нужно зарегистрироваться
• FotoFlexer— нужно зарегистрироваться
• PhotoShop Express — нужно зарегистрироваться
• Яндекс. Краски
• Графинг
• FanStudio
• Pixlr
  • Инструкция по работе с Pixlr
• SketchPad
• Queeky
• Splashup
• SumoPaint
• Pho.to
  • Editor.pho.to — многофункциональный фоторедактор
  • Makeup.pho.to — автоматическая ретушь портретов
  • Enhance.pho.to — комплексное улучшение фотографий
  • Funny.pho.to — фоторамки, фотоэффекты и фотоколлажи
  • Cartoon.pho.to — фото-карикатуры
  • Avatar.pho.to — уникальная аватарка
  • Cards.pho.to — интерактивные фото-открытки
  • Share.pho.to — фотохостинг
• ImageChef
• Glitterfy
• 3d_paint

On-line генераторы фонового изображения:

• PatternCooler
• BgPatterns
• Colourlovers
• Stripegenerator
• Stripemania
• Stripedbgs
• Tartanmaker
• Pixelknete
• Dynamicdrive
• Ogim.4u2ges
• Secretgeek
• Lab.rails2u
• Tilemachine

---

Векторные графические редакторы позволяют пользователю создавать и редактировать векторные изображения непосредственно на экране компьютера, а также сохранять их в различных векторных форматах, например, EPS, PDF, WMF или SVG.

Коммерческие векторные редакторы:

• Adobe Illustrator
• CorelDRAW
• Macromedia FreeHand
• Xara Xtreme
• Strokes Maker

Векторные редакторы (бесплатные):

• Inkscape
• OpenOffice.org Draw
• Skencil (бывший Sketch)
• sK1 (форк Skencil)
• Sodipodi
• Xara Xtreme for Linux

Векторные графические on-line редакторы:

• Svg-edit
• Myoats

---

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

• 3D Max (лицензия)
• Maya (лицензия)
• Blender
• Wings 3D
• OpenFX
• K-3D
• POV-Ray

---

Фракта́л (лат. fractus — дроблёный, сломанный, разбитый) — геометрическая фигура, обладающая свойством самоподобия, то есть составленная из нескольких частей, каждая из которых подобна всей фигуре целиком.

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

Примерами таких кривых служат:

• кривая дракона,
• кривая Коха (снежинка Коха),
  

• кривая Леви,
• кривая Минковского,
• кривая Гильберта,
• ломаная (кривая) дракона (Фрактал Хартера-Хейтуэя),
• кривая Пеано.

 

С помощью похожей процедуры получается дерево Пифагора.

Генераторы фракталов

• Apophysis
• Chaoscope
• ChaosPro
• Mandelbulb3D
• Sterling2 homepage
• Official SpangFract Yahoo Group
• XenoDream

 

пикселей — Scratch Wiki

В этой статье есть ссылки на веб-сайты или программы, которым Scratch не доверяет и которые не размещаются в Википедии. Помните о безопасности при использовании Интернета, поскольку мы не можем гарантировать безопасность других веб-сайтов.

пикселей (сокращенно «px») — это одна точка света на любом экране. Экраны большинства компьютеров имеют около миллиона пикселей. ^[1] Пиксель состоит из трех цветов: красного, синего и зеленого; при объединении они создают нужный цвет, отображаемый на экране. В Scratch 1.x используется пиксельная графика, называемая растровыми изображениями. Scratch 2.0 использует растровые изображения и векторную графику; векторная графика основана на математически рассчитанных сплайнах, а не на пикселях.

Содержимое

• 1 Использование с нуля
• 2 Разрешение
• 3 Размер
• 4 Плотность пикселей
• 5 субпикселей
• 6 дефектных пикселей
• 7 См. также
• 8 Каталожные номера

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

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

Пример рисования с использованием самой маленькой кисти в Scratch 1.4.

Шаги, такие как шаги в move(), измеряются в пикселях обычного размера, 480x360px. В режиме презентации они масштабируются в зависимости от разрешения экрана. В режиме макета небольшой сцены шаг составляет половину пикселя, поэтому спрайту требуется 2 шага, чтобы визуально переместить пиксель.

Разрешение

Термин «разрешение» является общепринятым и относится к количеству пикселей в области по ширине и высоте. Чем больше пикселей на экране, тем выше разрешение. Разрешение сцены 480×360 пикселей. Программа Scratch отлично отображается на всех разрешениях от 1024×768 пикселей и выше. Если разрешение ниже (например, 640×480 или 800×600), некоторые инструменты (особенно в редакторе рисования) могут накладываться друг на друга. При работе со Scratch на экране с низким разрешением иногда бывает полезно изменить макет рабочей области на маленькую, что делает рабочую область размером 240×180 пикселей, предоставляя больше места для сценариев, редактора рисунков и звука. Однако из-за этого довольно сложно увидеть сцену. Разрешение компьютера может быть от 320×200 до 9.999×9999 (что возможно только в Windows со взломом реестра). ^[2]

Измерение

Каждое разрешение имеет свое измерение. Измерение – это отношение более чем одного измерения. В Scratch размер сцены составляет соотношение 4:3, что означает, что ширина составляет 4/3 высоты, а высота — 3/4 ширины. Поскольку у сцены есть размер, независимо от того, насколько велик размер, соотношение сторон остается неизменным, а это означает, что любое разрешение сцены всегда пропорционально соотношению 4:3.

Плотность пикселей

Плотность пикселей относится к тому, сколько пикселей по прямой линии приходится на дюйм (сокращенно «ppi») на экране. Как правило, более крупные мониторы, такие как телевизоры, имеют низкую плотность пикселей, поскольку они имеют большую площадь отображения, в то время как устройства меньшего размера, такие как смартфоны, имеют высокую плотность пикселей. Более высокая плотность пикселей необходима для экранов, на которые можно смотреть вблизи, а более низкая плотность пикселей лучше подходит для экранов, на которые можно смотреть издалека.

Apple ввела термин «дисплей Retina» для своих устройств с высокой плотностью пикселей. Этот термин не используется другими компаниями, но относится к высокому разрешению на небольшой площади многих продуктов Apple. Рынок более высоких разрешений в небольших устройствах увеличивает плотность пикселей многих мобильных устройств.

Субпиксели

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

Дефектные пиксели

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

См. также

• Можно ли изменить разрешение проекта Scratch?
• Растровая графика

Ссылки

2. ↑ yt:Cm-ksJBSGT4

Файлы cookie помогают нам предоставлять наши услуги. Используя наши услуги, вы соглашаетесь на использование нами файлов cookie.

Дополнительная информация (на немецком языке)

Понимание пикселей и других единиц CSS · WebPlatform Docs

Винсент Харди, Сильвен Галино

Резюме

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

Введение

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

Они помогают разработчикам размещать контент независимо от размера и разрешения экрана.

Независимость от дисплея: адаптация макета

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

Медиа-запросы и настройки области просмотра

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

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

Процентные единицы

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

 body {
       ширина: 80%;
       максимальная ширина: 900 пикселей;
       поле слева: авто;
       поле справа: авто;
}
 

… чтобы размер тела не превышал 900 пикселей, а в противном случае занимал бы 80% ширины области просмотра. (Обратите внимание, что пиксели CSS не являются пикселями устройства; это будет подробно обсуждаться позже)

Другие полезные относительные единицы измерения

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

em	1 em — вычисленное значение размера шрифта для элемента, в котором оно используется.	Например, для элементов заголовка размер шрифта может быть установлен равным 3em, а размер основного текста должен быть равен 1em, чтобы при любых условиях отображения текст заголовка был в 3 раза больше основного текста. Следует отметить, что при использовании в качестве значения свойства размера шрифта единица em относится к размеру шрифта родительского элемента. Таким образом, в нашем примере элемент внутри с размером шрифта: 2 em будет иметь текст в 6 раз больше, чем в теле.
бывший	1 ex — высота x текущего шрифта. Высота x обычно (но не всегда, например, если в шрифте нет «x») равна высоте строчной «x»	Редко используется на практике. Может использоваться для изменения размера встроенных изображений в соответствии с высотой x текущего шрифта для визуальной гармонии.
ч	1 ch — это смещение глифа «0» (ноль) в текущем шрифте. «ch» означает символ.	Может использоваться для оформления моноширинного текста или шрифта Брайля.
рем	1 rem — вычисленное значение свойства font-size для корневого элемента документа. Эта единица часто проще в использовании, чем единица «эм», потому что на нее не влияет наследование, как на единицы «эм».	Например, если размер шрифта корневого элемента равен 20 пикселей, установка размера шрифта 0,5em для элементов приведет к разрешению 10 пикселей для первого уровня, а второго уровня будет иметь размер шрифта 5 пикселей. размер. Установка размера шрифта на 0,5rem приведет к созданию элементов размером 10 пикселей независимо от их уровня вложенности.
фольксваген	1vw составляет 1% ширины области просмотра. «vw» означает «ширину области просмотра».	Полезно для изменения размеров блоков, которые адаптируются к разной ширине области просмотра.
вх	1vh — это 1% высоты области просмотра. «vh» означает «высота области просмотра».	Полезно для изменения размера блоков, которые адаптируются к разной высоте видового экрана. Например, можно использовать для установки максимальной высоты изображения, чтобы оно не превышало размеры области просмотра.
об/мин	Равен меньшему из значений «vw» или «vh»	См. vh/vw
вмакс	Равен большему из значений «vw» или «vh»	См. vh/vw

Как насчет холста и вариантов использования «полного контроля пикселей»?

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

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

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

Рендеринг, не зависящий от разрешения

Но вернемся к основам: что такое независимость от разрешения и почему это важно?

Независимость от разрешения определена

Когда содержимое выводится на носитель вывода, такой как принтер или экран, программное обеспечение преобразует описание того, что необходимо нарисовать, в фактические пиксели. Например, строка текста сначала преобразуется в набор геометрических контуров, определяемых данными шрифта; эти контуры затем «растрируются» или превращаются в пиксели. Тот же процесс происходит для более простых фигур, таких как прямоугольник, нарисованный в определенном месте (координата x/y) и с определенным размером (шириной и высотой).

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

Это особенно важно, когда размер и плотность пикселей устройств вывода различаются так же широко, как и на современных устройствах просмотра. Например, на экране с разрешением 96 точек на дюйм (точка на дюйм = пиксель устройства на дюйм) миллиметр будет иметь длину около 4 пикселей устройства, поэтому прямоугольник, расположенный в точке (x = 10 мм, y = 20 мм), будет располагаться в точке x = 40 пикселей устройства и y=80 пикселей устройства. В то время как на дисплее с разрешением 300 точек на дюйм миллиметр будет иметь длину около 12 пикселей устройства, а прямоугольник должен быть расположен на координатах x = 120 пикселей устройства и y = 240 пикселей устройства. Однако, и это важная часть, прямоугольник будет отображаться в том же физическом положении на дисплее по модулю округления, то есть примерно на 10 мм по оси X и на 20 мм по оси Y.

Масштабируемое содержимое

Чтобы не зависеть от разрешения, система должна иметь возможность масштабировать содержимое в зависимости от условий рендеринга. Postscript и PDF являются примерами технологий, основанных на концепции единиц измерения, которые затем можно масштабировать по мере необходимости для соответствия доступному разрешению экрана. Оба используют единицу измерения «точка» и определяют ее как 1/72 дюйма.

Масштабируемая векторная графика (SVG) делает то же самое и имеет концепцию пользовательской единицы, из которой в конечном итоге выводятся все остальные единицы; CSS определяет пиксели CSS, единицу, к которой все остальные разрешают (пользовательская единица SVG такая же, как CSS «px»).

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

Прежде чем мы углубимся в единицу CSS «px», отметим, что масштабируемые форматы, такие как SVG, являются очень эффективным способом достижения независимости от разрешения или отклика для ваших графических ресурсов.

Примечание. Иконочные шрифты — еще одна недавняя популярная практика с 2013 года, например. см. http://css-tricks.com/html-for-icon-font-usage/ или http://nimbupani.com/markup-free-icon-fonts-with-unicode-range.html. А еще есть очень умные хаки OpenType, такие как Chartwell или Symbolset. Сегодня они являются частью масштабируемого арсенала.

О пикселях CSS, физических единицах измерения и масштабируемости

Хотя спецификация CSS Values ​​and Units определяет все единицы CSS в одном документе, может потребоваться некоторая работа, чтобы понять, как CSS связывает свои единицы измерения с реальными мерами. , или физические единицы. Все, что говорится в спецификации, может быть сформулировано как:

96px = 1 дюйм

Простая математика определяет два возможных поведения, разрешенных спецификацией:

• На устройстве с высоким разрешением — лазерные принтеры сегодня, экраны в будущем — CSS рендеринг должен сопоставлять дюйм с его физическим размером (это то, что спецификация называет «связыванием физических единиц с их физическими измерениями»). В результате единица CSS «px» (поскольку это 1/96 дюймов) может разрешаться в дробное число пикселей устройства. Например, на экране с разрешением 300 точек на дюйм (пикселей устройства на дюйм) отношение пикселей устройства к пикселям CSS составляет 300/96 = 3,125. Как следствие, если вы стилизовали элемент с помощью:

 граница: 1 пиксель сплошной синий;
 

… его граница должна быть шириной 3,125 пикселя устройства. В зависимости от растеризатора — части программного обеспечения, которая преобразует основные формы в пиксели — вы можете получить синий, полностью покрывающий 3 пикселя, а затем частично покрывающий 4-й пиксель, используя сглаживание для смешивания с фоном.

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

Еще несколько лет назад пиксель CSS обычно сопоставлялся с одним пикселем экрана. Как следствие, дюйм CSS не всегда соответствовал реальному физическому дюйму; если бы истинное разрешение ноутбука было 120 точек на дюйм, 9Дюйм длиной 6 пикселей в конечном итоге будет равен 96/120 = 0,8 физического дюйма!

С появлением экранов с более высокой плотностью мы видим устройства с 2 пикселями устройства на пиксель CSS (например, Apple Retina), а также дисплеи с дробным соотношением пикселей (см. эту статью MDN). Обратите внимание, что дробное соотношение пикселей может привести к дополнительному сглаживанию при рендеринге, как и при рендеринге с высоким разрешением.

Простой пример

 

    <голова>
        <мета-кодировка="utf-8">
        
        
        <мета-имя="описание" содержание="">
       <мета имя="окно просмотра"
              контент = "ширина = ширина устройства, начальный масштаб = 1, максимальный масштаб = 1">
    
    <стиль>
    тело {
        фон: #404040;
    }
    .css-box > диапазон {
    отображение: встроенный блок;
       высота: 1см;
    граница справа: 1 пиксель сплошной черный;
    }
    .css-box.px > диапазон {
       ширина: 96 пикселей;
        фон: #fefefe;
    }
    .css-box.in > диапазон {
       ширина: 1 дюйм;
        фон: #4166B5;
    }
    
    <тело>
        

        

    

 

Рис. 1. Рендеринг в OSX Safari

При попытке рендеринга этого документа на разных устройствах мы видим, что:

• Во всех случаях светлая и синяя коробки имеют одинаковый размер. Это связано с тем, что 1 дюйм CSS всегда равен 96 пикселям CSS; белые поля имеют ширину 96 пикселей, а синие поля имеют ширину 1 дюйм. Как и ожидалось, их ширина совпадает.
• На 15-дюймовом дисплее MacBook Pro с разрешением 110 точек на дюйм физическая ширина коробки составляет: 96 * 1/110 = 0,872 дюйма. Это связано с тем, что соотношение CSSpx/пиксель устройства равно 1. Используя линейку на моем экране, я измерил 0,88 дюйма, и разница заключается в моей элементарной линейке и приблизительном видении :-). Таким образом, дюйм CSS отличается от физического дюйма на 22,8%.
• На iPhone 5 с разрешением 326 точек на дюйм физическая ширина коробки составляет 96 * 2 / 326 = 0,589 дюйма. Это связано с тем, что на этой платформе отношение пикселей CSS к устройству равно 2. Опять же, используя линейку, я получил 1,592 дюйма. Опять ошибка измерения. Здесь дюйм CSS отличается на 41,1%
• На принтере (я использовал Canon Pixma MP600) физический дюйм коробки равен … 1,05 дюйма!! Так что это ошибка 5% на этом конкретном принтере.

Итак… пиксель не пиксель, а дюйм не дюйм?

Что ж, почти так, но все не так плохо, как кажется. Вот почему:

• Пиксель CSS является «эталонным», а не пикселем устройства . Это вводит в заблуждение, и лично я предпочитаю понятие «пользовательская единица», которое использует SVG, потому что я думаю, что тогда проще объяснить сопоставление с физическими единицами и пикселями устройства. Но как только вы понимаете, что «px» на самом деле является ссылкой, а не пикселем устройства, все становится более понятным. Следует помнить, что CSS px — это абстрактная единица измерения, и существует соотношение, управляющее тем, как оно а) сопоставляется с реальными пикселями устройства и б) сопоставляется с физическими единицами (фиксированным образом, соотношение всегда равно 9).6 CSS пикселей на дюйм).
• Дюйм CSS точно или «близко» к дюйму . На устройствах с высоким разрешением, и если никакие другие параметры не мешают (например, пользовательское масштабирование или преобразование CSS), дюйм будет физическим дюймом, как и ожидалось. На устройствах с низким разрешением будет погрешность, как описано выше.
• Масштабируемость и адаптируемость важнее всего . Наиболее важным аспектом для большинства разработчиков является то, что макет содержимого может изменяться и адаптироваться по мере масштабирования блоков предсказуемым и разумным образом. Хотя концепция сохранения точного соотношения сторон на всех устройствах может показаться привлекательной, она имеет последствия, нежелательные для устройств с низким разрешением (например, нежелательное сглаживание, вызывающее размытие рендеринга).

Заключительные мысли

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

1. Используйте медиа-запросы, чтобы использовать желаемый макет в зависимости от условий рендеринга (например, маленький экран устройства, тип планшета, рабочий стол, большой дисплей).
   Пикселей или пикселов: «Пикселов» VS «Пикселей» | Gamin