Best Practice of CSS Units For Responsive Web Design

Share your learning

Today we are going to discuss about the best practice of CSS units for responsive web designs.

We will also cover all types of CSS Units with best practice, in depth.

Why need to know about CSS units?

CSS units make a lot of difference when we talk about responsive web designs.

Let’s assume when we move from PC to Mobile, the websites change the way how they look on other devices. But it’s not that much simple, websites need to change layout sizes, text sizes and even image sizes also. That means there is a lot to change.

So, in short, it’s very important to use the right kind of CSS units so that every element of the website adapt the device size accordingly.

OK, So, what to use and when?

Type of CSS units?

Example:

P {
 Font-size: 14px;
}

Quite familiar, right?

So, above example shows that paragraph will be 14px in font size irrespective of device size. That means it will be 14px for large and small devices, no change.

This is called Absolute Units.

Wait-wait, there are lot more absolute units, will discuss below.

But we want (mostly) flexible units that could change according to device size, right?

Example:

P {
 Font-size: 0.9rem;
}

This example explain about the flexibility of sizes, means it will change the font size of the paragraph according to the device.

This is called Relative Units.

Have patience, we will discuss it, soon.

OK, let’s discuss more about types of CSS Units.

Absolute Units

Absolute units are static sizes that are not change according to the device or window sizes.

These units can be used where responsiveness is not necessary. Like for print page or desktop applications.

1.	px	96px = 1 inch (1/96)
2.	pt	72pt = 1 inch (1/72)
3.	pc	1pc = 12pt
4.	cm	centimeter
5.	mm	millimeter (10mm = 1cm)
6.	in	inches

Relative Units

Relative units are flexible in size that will help websites to resize according to the device. These units measured from parent element or window size.

1.	%	For example, margin 5% of child element will take margin from parent element size. Like if, Parent element width = 100px and height = 50px. Child element left, right margin = 5px (5% of 100px) And top bottom margin = 2.5px (5% of 50px)
2.	em	1em = Current font-size of the element. For example, current font-size = 14px Then 1em = 14px and 0.5em = 7px
3.	rem	r for root means rem will take font-size from root element like <html>. If root font-size = 12px Then 1rem = 12px and 0.3rem = 3.6px
4.	ch	For Example, width of paragraph = 14ch will allow us to add 14 characters per line.
5.	vh	1vh = Viewport height
6.	vw	1vw = Viewport width
7.	vmin	1vmin = Viewport minimum dimension. Like if device width = 360px and height 640px Then width will be considered for vmin unit.
8.	vmax	1vmax = Viewport maximum dimension. As the above example for vmin, this time height of the device will be considered for vmax unit.
9.	ex	Height of the current font sized lowercase ‘x’ Example : .subtitle { font-size: 1.3ex; }

To know more about relative units you can visit this blog.

Best practice of CSS units?

Grid layouts

For columns and rows, we can consider ‘%’ CSS unit because percentage will allow us to fill the 100% space and flexible according to window size.

For Example,

.row { width: 100%; }
.col-6 { width: 50%; }
.col-3 { width: 25%; }

Sometimes, we also can use ‘vh’, ‘vw’ or ‘vmin’, and ‘vmax’ units to define width and height of element if element should depend on viewport.

Like for landing pages, we usually create some sections that can cover the full viewport size.

Spacing

For margin and padding, we can use ‘em’ CSS unit because it can allow us to use flexible spacing around the boxes according to our font-size of the element.

So, element font-size will change according to device size therefore, spacing around the element will also change respectively.

Example:

body, html {
   font-size: 16px;
}

.first{
  font-size: 14px;
}

.second{
   font-size: 12px;
   padding: 1em;
   margin: 1em;
}

<div class="first">
        This is parent element
        <div class="second">
            This is child element
        </div>
    </div>

As per above example, class second have defined font-size 12px. So, the padding and margin will be 1em = 12px.

But if we remove the font-size from class second then class second will take em size from its parent class first i.e. 1em = 14px.

Again if we remove the font-size from the class first then class second will take em size from root element i.e. html, like 1em = 16px.

In short, it behave something like this Self Element - Parent Element - Root Element.

Border

For border we can use ‘px’ like 1px border will be 1px for all devices. But we have option to use ‘em’ that can give us dynamic width of border according to device.

Usually we can use ‘px’.

Typography

For text font-size we can use ‘%’, ‘em’, and ‘rem’. These units take size from parent element or root element in case of ‘rem’.

These relative units provide nice flexibility to font-size and help with responsive designing.

Media files

For images and media files we can use ‘%’, ‘vh’, ‘vw’ or ‘vmin’, and ‘vmax’. Like for responsive images we usually use width = 100% and height = auto.

‘vmin’ and ‘vmax’ also provide us the feature to use minimum and maximum size of the device.

If you like this article, please share and comment it.

Satpal