Peter
Working with Web Pixels (Px)
01
Pixels are considered absolute units, though they’re relative to the dpi and resolution of the device you’re using. However, on the device, the pixel unit is fixed, does not change based on any other element.
Using pixels can be a challenge especially when you are creating websites that are supposed to be responsive. This is because pixels maintain a specified sizing of the element as long as that is the specific number that you chose, and this won’t change based on the device your visitor is using to view your website.
Relative Measurements (%, EM, REM, VW, VH)
02
There are other measurements that are relative, for example: The EM and percentage (%) sizings are relative to the parent element.
The REM is relative to the root element; that is, the HTML tag that has been allocated to that specific element. The viewport width (VW) is relative to the viewport’s width, and then the viewport height (VH), which is relative to the viewport’s height.
Unlike pixels, relative units like percentage, EM, and REM are better suited for responsive designs. In case you are creating any web projects that you want to be responsive on different devices, consider using the percentage, EM, and REM, depending on how you want them to work.
For example, if you want something to be relative to the HTML tag, then you can use the REM, if you want something to be relative to that parent tag, then you can use the percentage or the EM.
Video: Working with PX, EM, REM, %, VW, VH in Elementor
Check out more on this story on the link below.