CODEWITHSUNDEEP
css
Blcknx
Blcknx

Reputation: 2431

What is a pixel (px) in CSS (in times of retina displays)?

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?

Upvotes: 2

Views: 4433

Answers (2)

Tyler Roper
Tyler Roper

Reputation: 21672

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).

Upvotes: 9

IvanS95
IvanS95

Reputation: 5732

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.

Upvotes: 4

Related Questions