Introduction
When creating a website, you gotta decide which units to use to specify sizes and distances. There are two types - absolute and relative - and each has its own pros and cons. Absolute units are fixed in size and are perfect for things that should always look the same size no matter what device you're using. Relative units, though, are adaptable and change based on the size of the viewport, so they're ideal for making designs that work well on different devices. In this article, we'll go over the different units you can use and what they're good for. Consider this blog as more of a cheat sheet for some CSS units that one can use while making apps.
Absolute measurement units
Absolute units are constant across different devices and have a fixed size. They are useful for activities like printing a page. They are not so suitable when it comes to the wide variety of devices in use today that have different viewport sizes. Because of this, absolute units are used when the size of the web page is known and will remain constant.
Absolute units Table
The table for absolute units can be seen below:
| Unit | Name | Comparison |
| Q | Quarter-millimeters | 1Q = 1/40th of 1cm |
| mm | Millimeters | 1mm = 1/10th of 1cm |
| cm | Centimeters | 1cm = 37.8px = 25.2/64in |
| in | Inches | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6th of 1in |
| pt | Points | 1pt = 1/72nd of 1in |
| px | Pixels | 1px = 1/96th of 1in |
Of these, the pixels and centimeters are most frequently used for defining properties. As most of the units, we might know so we don't discuss about each of them.
Relative measurements values
When you create a web page, you will rarely have only a single element present inside it. Even in the case of containers such as flexboxes and grids, there’s usually more than one element present that rules are applied. Relative values are defined ‘in relation’ to the other elements present inside the parent element. Additionally, they are defined ‘in relation’ to the viewport or the size of the visible web page. Given the dynamic nature of web pages today and the variable size of devices in use, relative units are the go-to option in many cases. Below is a list of some of the important relative units.
Relative units Table
Many of these units are used in terms of the relative size of fonts. Some units are more suitable depending on the relative context. Like when the dimensions of the viewport are important, it's more appropriate to use vw and vh. In a broader context, the relative units you will see most frequently used are percentage, em, vh, vw and rem.
| Unit | Description and relativity |
| em | Font size of the parent where present. |
| ex | x-co-ordinate or height of the font element. |
| ch | Width of the font character. |
| rem | Font size of the root element. |
| lh | Value computed for line height of parent element. |
| rlh | Value computed for line height of root element which is <html>. |
| vw | 1% of the viewport width. |
| vh | 1% of the viewport height. |
| vmin | 1% of the smaller dimension of viewport. |
| vmax | 1% of the larger dimension of viewport. |
| % | Denotes a percentage value in relation to its parent element. |
Here is a brief overview of the commonly used relative units:
em:This unit is relative to the font size of the parent element. For example, if the parent element has a font size of 16px, 1em is equal to 16px.rem:This unit is relative to the root element, which is usually the <html> element. This means that the font size specified in rem will be the same regardless of where it is used in the document.%:This unit is relative to the size of the parent element. For example, if the parent element has a width of 100px and the child element is set to 50%, its width will be 50px.vwandvh: These units are relative to the viewport width and viewport height, respectively. 1vw is equal to 1% of the viewport width, and 1vh is equal to 1% of the viewport height.vminandvmax: These units are relative to the smaller and larger of the viewport dimensions, respectively. For example, 1vmin is equal to 1% of the smaller dimension of the viewport, and 1vmax is equal to 1% of the larger dimension of the viewport.
It's important to note that relative units can be combined with absolute units to create a responsive design that can adapt to different viewport sizes. For example, you can use a combination of em and px to specify font sizes and use percentage or vw units to specify widths and heights of elements.
Conclusion
Choosing the right units is super important when making a website because it affects how the site looks and how easy it is to use. Absolute units are good for things that need to be the same size no matter what, while relative units are better for designs that need to adapt to different devices. The units you use also depend on what you're trying to do. By knowing what each unit is good for, you can make sure your website looks great and works well on any device. It also helps make the website quite responsive. In the next blog , we discuss how to make apps responsive using CSS(media queries)