so there's a lot of discussion and debates about which CSS size unit should
be use there is pixel side which is static unit and there's REM side which
is relative unit in this video we will talk about pros and cons for each of
them and how to decide which to use in 2020 let's check it out
so let's talk about pixel unit I believe most of you are familiar with this one
so pixel is well pixel it's a static unit when you set the size in pixel you
have specified an absolute and universal size a 500 pixels width element should
look almost exactly the same in all browsers I said almost because there's a
minor differences on browsers rendering engine setting nevertheless pixel unit
is easy to understand and work with without any potential confusion
especially when working with animation move the element 10 pixels to the right
is easier to understand than 10 grams to the right so why not sticking with just
pixel? the main reason is accessibility for example if we set the font size to
let's say 20 pixels browsers will ignore the custom font size in the browser
setting in the past when browsers were not well developed like today this
caused problems for users with visibility impaired or older people who
just want to increase the text size so to solve this problem a relative units
like rem were introduced rem is relative to the current font size of the root or
HTML element for example if we set the width of the div to 2rem then the
actual width will equal to 32 pixels which is two times of the default font
size which is 16 pixels
similarly if we set the element font-size to 2rem and users have the custom
font-size set to 30 pixels in browser setting then our element will have the
actual font size of 60 pixels
relative units also have another advantage when working on responsive
design for example if you want to scale up all the elements on your page for
mobile then all you have to do is to increase the font size of the HTML
element while static units like pixel you will have to adjust them manually
now the catch is relative unit is more difficult to work with than static unit
first one rem in website A doesn't necessary equal to website B this could
lead to confusion especially if you are working with multiple websites and
second you have to convert between pixel and rem all the time since the image and
even some CSS libraries are working in pixel unit
now the question is which one we should use pixel or rem first let's compare
them side-by-side the text on the left is in pixel unit and the right one is in
rem now let's try changing the custom font size to something larger
you can see that the left one with pixel remain unchanged while the right one
scale this could be a problem for accessibility in the past but now all
browsers scaled the entire page when zooming regardless of the font size unit
so if we zoom our example you see that they are now identical
this solve the accessibility issues of pixel unit for those who need larger
text nevertheless pixel units still lack the ability to scale the elements by
changing just the font size
but if you decide to embrace REM then you have to deal with the conversion
between pixel and gram still there is a trick to make this easier if we set the
font size of the root element to 62.5% then 1rem will equal to 10 pixels
this because 62.5% of the default font size of the
root element is 10 so with this trick if you want to set the width of the
element to let's say 100 pixels then it's going to be 10rem so now you
know about pros and cons for both pixel and rem which one should be used well
there is no correct answer while pixel is easy to understand and work with it
ignores the custom font size setting of the users however visibility impaired
user can still use the zoom function to scale the website as for rem it's a bit
harder to set up and understand but it gives you users to full control off the
default font size and also give you an ability to scale the entire website by
just adjusting the root element font size as for me I use pixel most of the
time with exception for some web design layout that scales a lot so which one
you use and why let me know in the comment below as always thanks for
watching this video and don't forget to subscribe for more web dev tips and
tutorials see you next upload bye