When should I be using px ?

Question

User-1157568318 posted

I have this odd feeling of using px . There are a lot of blogs and videos insisting on not using px. They tell you to use rem , em or % but never tell you where to use 'em (pun intended). But I'm a beginner trying to create modern web designs ( in order to create a portfolio).
Whenever I'm using px , I feel like I'm treating the 'responsive gods' bad.

I've learned from blogs and experiences of people that rem is to be used for fonts and em for media queries.

But what about margins , paddings , heights and widths . What should I be using there ?(And yes I've googled and maybe due to my poor googling skills , I haven't found a answer yet.)

Answer 1

User-474980206 posted

px works fine for responsive (screen size independence), it bad for accessibility. unless you add scaling support. users with vision problems can not change the font sizes. rem fixes this, and most frameworks (like bootstrap 4) are switching to rem. em's are relative to the current font size, so they make sense for margins and padding (a larger font needs more padding). px's are still required in media queries based on device sizes.

Answer 2

User-2054057000 posted

Pixels (px) are absolute while % is relative. 

Take for example you have a web page that will be opened in 3 types of devices:

1. Large screens of desktop.
2. 15.4 inch screen of laptops 
3. Tablets and mobile

In such a case you do not want to set the size of a div or an image in pixels (because 200 px*200 px image will look fine in mobiles but very small in large screens). So in such a case you will use % for setting image size. 

You will understand all these when you will make Responsive Designs. I recommend you to read how to use CSS Media Queries to understand how these things work.

Answer 3

User288213138 posted

Hi Olympiapeter，

Px is a unit of relative length, relative to the resolution of the display screen.

Em is also a unit of relative length. Font size relative to the text in the current object. For example, the current font size for inline text is not set artificially, relative to the browser's default font size.

Rem is a relatively new unit in CSS3. The difference with em is that when rem is used to set the font size for an element, it is still a relative size, but only the HTML root element.

Note: which font unit to use depends on your project. If your user base is using the latest version of the browser, rem is recommended. If you want to consider compatibility, use px, or both.

 
Best Regard,
Sam

Answer 4

User-1151440187 posted

We should use px units when we want to set a specific font-size, height, width, padding, margin, etc that will not change even when the user changes a setting, like a larger default font-size, for the browser.

Answer 5

User-857013053 posted

Follow this link : https://engageinteractive.co.uk/blog/em-vs-rem-vs-px