2

What is a pixel in CSS in times of retina displays?

Questions about px have been answered in the past. The answers seem a little out of date and don't address the screens of today. Or they have been answered in the present, but in much more complex contexts.

So for 2019 the simple question: What is a px in CSS?

ksav
  • 20,015
  • 6
  • 46
  • 66
Blcknx
  • 1,921
  • 1
  • 12
  • 38
  • 1
    Possible duplicate of [Pixel density, retina display and font-size in CSS](https://stackoverflow.com/questions/12058574/pixel-density-retina-display-and-font-size-in-css) – pjones235 Jan 04 '19 at 19:02
  • @tylor: Looks like a good answer, unfortunately placed as a comment. – Blcknx Jan 04 '19 at 19:03
  • 1
    Kinda curious as to what you mean by *"Do you see a question mark?"*, being that every single marked duplicate so far has had plenty of question marks. Unless you're just reading the title of the duplicate without even looking at its content, which means more or less nothing. – Tyler Roper Jan 04 '19 at 19:17
  • But the possible duplicate _has_ a question mark...? What are you looking at? – Modus Tollens Jan 04 '19 at 19:21
  • The "dupe" has. What they call the "original" is no question at all. You would not find it, when searching for questions. – Blcknx Jan 04 '19 at 19:24
  • I am sorry, I have no idea what you are talking about. Original? And: questions are found by tags and keywords, not by containing a question mark. This makes no sense. – Modus Tollens Jan 04 '19 at 19:25
  • @modus-tollens: A clear phrasing is a primary part of the finding process, not only tags. – Blcknx Jan 04 '19 at 19:28

2 Answers2

8

What is a pixel in CSS in times of retina displays?

From CSS Techniques For Retina Displays:

CSS pixel is an abstract unit used by the browsers to draw images and other content on a web page. CSS pixels are DIPs which means they are device independent pixels. They readjust themselves according to the pixel density of the screen they are rendered in.

If we have the following piece of code:

<div style=”width:150px; height:200px”></div>

The HTML component above would look 150px by 200px in size in a standard display while 300px by 400px in a Retina display to retain the same physical size.

enter image description here

What is a px in CSS?

Per Understanding pixels and other CSS units, on a high resolution device, a CSS px is 1/96th of an inch.

The CSS pixel is a ‘reference’ pixel, not a device pixel. This is misleading and, personally, I prefer the notion of ‘user unit’ that SVG uses because I think it is easier to then explain the mapping to physical units and device pixels. But once one understands that a ‘px’ is actually a reference, not a device pixel, things make more sense. The thing to remember is that a CSS px is an abstract unit and there is a ratio controlling how it a) maps to actual device pixels and b) maps to physical units (in a fixed way, the ratio is always 96 CSS px to an inch).

A CSS inch is exactly or ‘close’ to an inch. On high resolution devices, and if no other parameters interfere (like user zoom or CSS transforms), an inch will be a physical inch as expected. On low resolution devices, there will be a margin of error, as explained above.

Scalability and adaptability is what matters most. The most important aspect for most developers is that content layout can reflow and adapt as units scale in a predictable and reasonable way. While the concept of keeping the exact aspect ratio on all devices might seem appealing, it has consequences that are not desirable on low resolution devices (such as unwanted antialiasing causing blurry rendering).

Community
  • 1
  • 1
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • I think this is a good part of the answer. It does not answer the reference point of the DIP. – Blcknx Jan 04 '19 at 19:17
  • I think your question is far too broad to expect an answer to cover exactly what you want. If you want specific answers, ask specific questions. – Tyler Roper Jan 04 '19 at 19:19
  • Do you really think the question "What is a pixel in CSS?" as too broad? I think this can be answered and you already did a good start. – Blcknx Jan 04 '19 at 19:22
  • Now it holds the two parts I think that are important: 1. That they are device independent. 2. That they are orientated on 96 CSS px to an inch. – Blcknx Jan 04 '19 at 19:29
4

Read this https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/

This article covers this question really well, particularly this quote:

If I had designed a webpage to be 320 pixels wide (which used to be the full width of an iPhone 3) would it now only be half the width of the iPhone 4 screen? That wouldn’t be good, because the content would be too small at half the size! Luckily that wasn’t the case, because the 320 pixels that are coded into HTML/CSS no longer have a one-to-one relationship with all displays:

On 1x displays: 1 pixel width in HTML/CSS = 1 pixel wide on screen On 2x displays: 1 pixel width in HTML/CSS = 2 pixels wide on screen The browser knows the resolution of the display, and translates HTML/CSS pixels into hardware pixels.

IvanS95
  • 5,364
  • 4
  • 24
  • 62