Hacker News Reader

Comment by sksasi | Hacker News Reader

Is it still ok to use px unit?

I use relative units (ems/rems) for font sizes and absolute units (px etc) for everything else such as margins/paddings/borders. I also set the html font size to 62.5% which makes the math easy (1rem = 10px).

This ensures that if a user adjusts their browsers font size for accessibility purposes or uses dynamic type, only the text will scale. You don’t want margins/paddings to scale with font size (at least not linearly) otherwise the layout gets cramped/unusable very quickly.

As others have mentioned CSS pixels have nothing to do with hardware pixels. So there are no issues with the differences in screen densities between devices.

px in CSS/web is just shorthand for 1/96th of an inch, regardless how many actual pixels that ends up being. This means it's functionally the same as any other absolute value of measurement on the web, since they are all based in some mapping to physical size as well.

That's only true on (most) mobile devices. px is still 1 pixel on Desktop with 100% system UI zoom (e.g. non-hidpi monitors).

It's still 1/96th of an inch in those cases, that's what is meant by "regardless how many actual pixels that ends up being".

If you change system UI zoom setting then the 1 pixel size in the browser change with zoom. At 200% web 1px is actual 2px. I am not sure how it could be "1/96th of an inch" when it can change size depend on the system setting.

1/96th an inch based on what the browser/system report the pixel density to be. There is no man coming out of your computer with a ruler to verify the reported value, so you're free to use a scaling value that isn't true. Zooming the browser or changing the system scaling will change the reported size of the pixels to the renderer.

Don't take my word for it, it's how it's defined in the CSS spec: https://www.w3.org/TR/css-values-3/#absolute-lengths

I know that is how its defined in the spec. But your original comment imply that it's literally 1/96 of an inch everywhere regardless of the device.

¯\_(ツ)_/¯, to the browser - it is. It is a good note to point out the browser may not have an accurate sizing of the display and would produce incorrectly sized outputs in those cases, but it doesn't change how px sizing works.

I stick to percent personally. Easier to adjust if I am working on someone else's messed up css. rem/em depends on global values but many sites override these with different classes and manually entered pixel values. I find % to be safer than em/rem.

I still use it, I have yet to find any actual downside to it.

Reply on news.ycombinator.com