The Best CSS Unit For a Responsive Design

CSS units are very important when creating a responsive website and you might wonder which one to use considering we have several CSS units. I had the same issue while working on a project, so I did some research on it. In this article, I will show you the most suitable CSS units to use for responsive design.

CSS Units

There are two types of CSS Units which are:

Absolute Length Unit
Relative Length Unit

Absolute Length Unit

Absolute Length unit is a fixed unit across all devices and may vary in different screen resolutions because they depend on the DPI (dots per inch) of each screen. These units include:

px - Pixel
pt - Point
pc - Picas
in - Inch
cm - Centimeter
mm - Millimeter

Pixel

Out of the listed units above, I will write about the CSS pixel unit since it is a commonly used measurement in designing the layout of a website. Although pixel falls under the absolute length unit, it is relative to the viewing device and has a constant effect on various screen sizes. CSS pixel is good when setting a border since we want it to stay the same on different screen sizes, unlike font sizes.

Relative Length Unit

Relative Length unit does not have fixed sizes, they are relative to something it could be the font size of a parent element or the size of a viewport. I prefer these units since they adjust to different screen sizes. They include :

em - Relative to the font-size of the element
ex - Relative to the x-height of the current font
% - Relative to the parent element
ch - Relative to the width of zero
rem - Relative to the root element
vw - The viewport width is relative to 1% of the width viewport (browser window)
vh - The viewport height is relative to 1% of the height viewport (browser window)
vmin - The viewport minimum is relative to 1% of the viewport (browser window) for smaller dimension
vmax - The viewport maximum is relative to 1% of the viewport (browser window) for larger dimension

I will be writing about the following relative units, Rem, Em, Percentage (%), View-width (vw) and View-height since are they preferred for responsive design.

Furthermore, they are most commonly used unlike other relative units that have limited browser support but you can get a detailed explanation on other relative units at tutsplus.com. So let’s dive into each unit.

Rem

Rem is an absolute unit relative to the root element of the HTML document and is commonly used for font sizes. It is a scalable unit in which the browser renders into pixel values. I recommend it for responsiveness. The default root element font size is 16px.

If we set the font size of an element to 1rem that will render as 1rem which equals 16px. CSS framework like Bootstrap 4 uses the rem units, this is because it is relative to the root element also known as the HTML tag and scales through all devices. Here is an example using the rem unit.

html {
    font-size: 20px;
}

.boxes {
    font-size: 24px;
    background-color: blueviolet;
} 

.box h1 {
    font-size: 2rem;
}

.box p {
    font-size: 1rem;
}

Em is also an absolute unit but unlike rem unit, it is relative to the immediate parent element. It can also be used for font sizes but can lead to unexpected results because it is relative to the immediate parent. For example, if the font size of a div is 16px then 1em of the child element will be 16pixel and 2em will be 32pixel. This can give a lot varying font sizes which can affect the website design. I mostly recommend them for margin and padding because of the issues you might encounter with font sizes. Here is an example of the em unit.

html {
    font-size: 20px;
}

.boxes {
    font-size: 24px;
    background-color: rgb(70, 43, 226);
} 

.box h1 {
    font-size: 2em;
}

.box p {
    font-size: 1em;
}

Percentage(%)

The percentage unit is also relative to the parent element and is commonly used as the width and height of an element. Although there is no fixed rule on where to use this unit,it is rarely used for font sizes. The percentage unit is also useful when creating a responsive layout.

body {
   width: 100%;
   background-color: burlywood;
}

.boxes {
width: 80%;
border: 1px dotted yellow;
} 

img {
    width: 50%;
}

Viewport Width (vw)

This unit is relative to 1% of the width of the viewport (browser window). What this means is that the vw unit will adjust according to the different browser windows. The difference between percentage (%) and vw is just like the difference we encounter between rem and em. The Percentage unit is relative to the containing element while vw is relative to the viewport which is the browser window. Here is an example of vw unit.

body {
   width: 100vw;
   background-color: burlywood;
}

.boxes {
width: 20vw;
border: 1px dotted yellow;
} 

img {
    width: 100vw;
}

Viewport Height (vh)

The viewport height is relative to 1% of the height of the viewport (browser window). A 5vh will lead to 5% of the current viewport height. This unit works just like the vw but with the height of a viewport, it is helpful when building a responsive website. Here is an example of a vh unit.

body {
   background-color: burlywood;
}

.boxes {
height: 20vh;
border: 1px dotted yellow;
} 

img {
    height: 50vh;
}

Conclusion

In conclusion, there is exactly no fixed rule on what CSS unit to use when designing the layout of a website but for building a responsive website that scales through different screen sizes I will recommend using relative units but if you want a fixed size for different screen sizes, then using CSS pixel comes in handy.