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 for responsive design. preferred 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 . So let’s dive into each unit. tutsplus.com 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. { : ; } { : ; : blueviolet; } { : ; } { : ; } html font-size 20px .boxes font-size 24px background-color .box h1 font-size 2rem .box p font-size 1rem Em 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. { : ; } { : ; : (70, 43, 226); } { : ; } { : ; } html font-size 20px .boxes font-size 24px background-color rgb .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. { : ; : burlywood; } { : ; : dotted yellow; } { : ; } body width 100% background-color .boxes width 80% border 1px 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. { : ; : burlywood; } { : ; : dotted yellow; } { : ; } body width 100vw background-color .boxes width 20vw border 1px 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. { : burlywood; } { : ; : dotted yellow; } { : ; } body background-color .boxes height 20vh border 1px img height 50vh 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. Conclusion