absolute px, in, pt, or cm
1in is always *72pt*
If screen resolution is 96ppi then one px will be equal to one physical pixel
don't scale according to the width of the browser window
useful for precise font sizing, and for border widths
Pixel ratio is tuned by font-size in <html>, user zoomed in, user changed browser’s font setting.
relative to either the height or width of a parent element.
The em unit can be used to declare font-sizes. For most users (and browsers), a font-size of 100% would default to 16px unless they change the default font-size through their browser settings... Although this is possible, it’s often a bad idea to set font-size in the <html> to a pixel value because it overrides the user’s browser settings. Instead, you can either choose to use a percentage value, or leave out the font-size declaration entirely. font-size will be set to 100% if you left it out entirely.
it’s a best practice to use relative units like em for font-size, margin and padding...
means Root EM. It’s built to provide some relief the em computational problem that many faced. It is a unit of typography equal to the root font-size. This means 1rem is always equal to the font-size defined in <html>... Some developers avoid rem entirely, claiming that using rem make their components less modular. Others use rem for everything, preferring the simplicity that rem provides... rem can cause duplication and super complex code... em unit is useful when you need to scale a property with it’s font-size. However, you’ll run into problems if you need to size the property accordingly to the root font-size
em-rem together rules:
- Size in em if the property scales according to it’s font-size
- Size everything else in rem.
em-rem-px im Media queries
em and rem units should not be affected by changes in font-size in the HTML since they’re based on the browser’s internal font-size property. Unfortunately, we didn’t get the perfect behavior on Safari... mobile Safari was affected as well... we shouldn’t use rem media queries... 2. User Zooms In... pixel based media queries is consistent between the browsers. But Safari is not consistent when using em/rem based media queries... 3. User Changed Their Browser’s Font Setting... em and rem, on the other hand, is based on the font-size of the browser. it’s a no-go for pixel based queries 😱😱😱...
There's another case where em breakpoints are very useful: Firefox allows you to zoom the text size only (which is pretty similar changing the minimum font size in the browser settings). Using breakpoints defined in px will miserably fail, whereas ems will work
conclusion: use em and have problems on Safari(what about mobile Safari?) and do not use px that have problems with Font Setting and Firefox zoom