CSS Units - Excellence Technologies

The first and most fundamental concept in building a responsive web design is the units that we use to set many of our properties with.
In this article, we are going to learn some CSS units and how they are different from each other and when to use a particular unit according to your requirements.

There are many CSS properties that require size units which are as follows:

font-size defines the size of the text.
border-width defines the weight of element borders.
margin defines the spacing between elements.
left/right/top/bottom allows to position and move elements.

CSS has a way to express length in multiple units. Length is a combination of a number and unit with no whitespace. E.g. 5px, 0.9emetc.

There are 2 types of units available in CSS.

Absolute Units
Relative Units

Absolute Units

Units that are “absolute” are the same size regardless of the parent element or window size. This means a property set with a value that has an absolute unit will be that size when looked at on a phone or on a large monitor (and everything in between!)

Absolute units can be useful when working on a project where responsiveness is not being considered. For example, desktop apps that can’t be resized can be styled for the default dimensions. If the window doesn’t scale, you don’t need the content either.

Absolute units can be less favorable for responsive sites because they don’t scale when the screen size changes.

While px (pixels) are the unit that is most common, in CSS we can also use pt, pc, in, cm, mm, and many more, though I wouldn’t really recommend those unless you’re styling something for print.

Relative Units

Relative units are useful for styling responsive sites because they scale relative to the parent or window size (depending on the unit).
%, em, rem, vh, vw are some famous relative units that are used.

Let’s understand some of them

Percentages(%)

% is relative to the immediate parent. A container directly inside the viewport with a width of 90% will always be 90% of the available width – whether I am on a phone or high-resolution display

If I have another container inside that first container with a width of 50%, it takes 50% of the width of the parent element and not the viewport.
When we use percentage for width, margin, or padding it is always looking at the width of its parent (yes, even for margin and padding on the top and bottom).

<body>
    <div class="container">
       hello
    </div>
</body>

.container{
   width:600px;
}

In the above example, the page will look good but when the screen width becomes less than 600px <div> will overflow the page and <div> width is 600px on a smaller screen. when we use px we are telling how big element should be irrespective of screen size.

.container{
   width:90%;
}

When we use percentage we are telling the page that it will take a width 90% with respect to its parent. So when the screen size is decreased <div> will take width with respect to its parent which is <body> in this scenario.If we set the width of <body> to 80% then <div > will take a width 90% of <body>.

em Units

When you declare the font-size of an element, if you use ems, it will be relative to the parent’s font-size.

for example

<body> 
    <header class='head'>
        <div class="naviagator">
            <ul>
                <li>Nav 1</li>
                <li>Nav 2</li>
                <li>Nav 3</li>
            </ul>
        </div>
    </header>
</body>
below is the css for this HTML

body { 
    font-size: 20px; ...
}
/* ul will apply font size 2em With respect to its parent*/
ul { 
    /* 2em = 20 * 2 = 40px  */ 
    font-size: 2em;
}
li {
 /* 20*2*2=80px */
  font size:2rem
}

In case of em unit, we have to remember that it will default to the font-size of its immediate parent, which means that if in our above example, we change the font-sizeof class container to be 15px, then the ul will start to size relative 15px. Also the li looks at it’s parent, which then looks at the body, so we get a total font-size of 80px (2x 2 x 20px). Things can quickly get out of control

rem Unit

The rem unit is similar to em, but instead of depending upon the parent’s value, it relies upon the root element’s value, which is the <html> element.
Relative to the font-size of the root (e.g. the <html> element).
“rem” = “root em”
As we can see, using em can be confusing at times since it takes it’s size from its parent which may have its font-size defined.

You don’t get the nesting issue as we saw with em. This makes it easier for you to set sizes relative to a font size declared on the root element, no matter what context the element is in.

Nice to know that you can use ems everywhere in your design (where length value is acceptable) but for me – and others – is not the best option. I don’t use it in media queries because I think in this case the absolute values are better.

vh and vw

Viewport, in the case of css, refers to the browser screen

vh stands for viewport height and vw stands for viewport width.
vh and vw are relative to viewport.%, em, rem are relative to its parent but vh and vw are relative to its viewport it’s mean, whatever its parent width have it will take width with respect to its screen port instead of a parent element.

The measurement vhis equal to 1/100 of the viewport height. So, for example, if the browser height is 900px, is 1vhequivalent to 9pxand, similarly, if the viewport width is 750px, is 1vwequivalent to 7.5px.

vh = 1% of the viewport height

100vh = viewport height

1vw = 1% of the viewport width

100vw = viewport width

The good thing about viewport units is that they are automatically recalculated whenever the viewport changes. This happens on a load, on resize or even on orientation change.