First of all, whenever possible, HELIO tries to hide exact values from you since setting them can be a hassle. However, specifying the dimensions of an image or illustration can sometimes be necessary in order to improve performance or simplify layout logic.
In certain situations, HELIO may require you to input numeric values in px, such as when specifying a minimum width for an element.
px unit?HELIO is built using web technologies such as HTML, CSS, and JavaScript. So naturally CSS is used to style and size elements. One important unit of measurement in CSS is the px – also known as the CSS pixel.
Wait, don’t skip this section – there is one important fact you SHOULD know about CSS pixels: they are density independent, meaning they should not be affected by different screen resolutions.
Yes, you heard it right. According to the official CSS specification (https://www.w3.org/TR/css-values-3/#absolute-lengths), 96 resolution-independent CSS pixels are approximately equal to one inch. Hence, any hardware manufacturer that aims to build a smartphone capable of beautifully rendering all your favorite websites must follow this rule.
So this means that…
Pixel ratio in web design refers to the ratio between the physical size of a pixel on a device and the CSS pixel used in web design. It can be found by dividing the physical pixel dimensions by the CSS pixel dimensions. There are various online resources available to look up pixel ratios for common devices.
Open the site https://www.mydevice.io/ in the browser of your target device. The calculated values include the pixel ratio.
<aside> <img src="/icons/light-bulb_lightgray.svg" alt="/icons/light-bulb_lightgray.svg" width="40px" /> Tip: In lots of cases it is not possible to view this page an your target device.