Responsive Web Design: Understanding units of measurements in CSS

Responsive Web Design: Understanding units of measurements in CSS

Prosper Ikechukwu's photo
Prosper Ikechukwu
·

6 min read

The 21st Century has seen the emergence of unique devices that can access the internet. These devices have mind-blowing features ranging from broadband width, camera quality, screen size and resolution.

In the case of screen size or width, this translates to people accessing web pages and web apps at various screen sizes and orientations.

The above can be fun and impressive for clients or end users but means a colossal responsibility for web and app developers, especially Front-end developers. This means that web developers must ensure that their apps are responsive and appear visually pleasing on all screens.

Responsive web design is currently a vast and essential skill set for developers. It has also been the reason behind the emergence of various CSS (Cascading StyleSheet) frameworks and libraries like Bootstrap, Tailwind etc. These frameworks usually provide an easy way out for developers to handle responsive designs. Still, they can be challenging to customize, forcing developers to conform to a particular design style.

Though Responsive design poses an arduous task to a few developers, some rules or guides exist to ensure that web apps are as responsive as possible.

One of the guides is the Understanding of units of measurement in CSS.

So, let's learn together 😎

Firstly, every element (image, text, etc.) or content in front-end development is usually treated as a box when discussing design and layout. This is commonly known as CSS Box Model. And just like regular boxes, CSS boxes have different dimensions, which usually depend on an element's content. But web developers usually have the authority to alter, adjust and resize elements depending on design specifications.

So, a good understanding of units of measurement in CSS and how they are being implemented will help order layouts to become responsive.

In CSS, the various units of measurement are classified into two main groups, which are; Absolute and Relative units.

Absolute units

Absolute units are based on an actual physical unit. They are fixed and appear the same on every device or screen size. Depending on your operating system or browser, some exceptions may exist.

Some absolute units are:

  1. Pixels (px): This is one of the most commonly used units. It is often calculated as 1/96 of an inch. Other absolute units are based on the definition of a pixel. Also, it is essential to note that printers and screens with higher resolutions and DPI (dots per inch) have a slightly different calculation from the standard pixel size.

  2. Centimeters (cm): 1cm in CSS is roughly calculated as 37.8px, or 25.2/64 inches.

  3. Millimeters (mm): 1mm is roughly calculated as 3.78px. It is 1/10th of a centimeter.

  4. Inches (in): 1in is calculated as 96px, or 2.54cm.

  5. Points (pt): 1pt is roughly 1.3333px, or 1/72 of 1inch.

  6. Picas (pc): 1pc is roughly calculated as 16 pixels or 1/6 of an inch.

Relative units

Relative units are relative to something, either the size of the parent element's font or the viewport's size. It is relative to another length property. They usually scale differently based on the device.

Some of the common relative units include:

  1. Ems (em): This unit gets its name from a typographical unit. In the field of typography, it is referred to as the width of the capital letter "M". When used in properties like font-size, it is usually calculated relative to its parent element's font size. But when used in properties like width, it's calculated using the font-size of the targeted element. A simple illustration is below:

    .container {
font-size: 16px;
}
.container p {
font-size: 1em;
}
.container h2 {
font-size: 2.5em;
}
.container h3 {
font-size: 20px;
width: 3.5em
}

    From the code snippet above, the font-size of p is 16px (16 x 1), and the font-size of h2 is 40px (16 x 2.5). Meanwhile, the width of the h3 element is 70px (20 * 3.5).

  2. Rems (rem): rem is short for root em. This unit is relative to the font-size of the root element and not the parent elements as in the case of ems. The root element of a web page is the html element, and in most browsers, the default font-size is 16px. Here is a code snippet below:

    p {
font-size: 1.5rem;
}

    From the code above, the font-size of the p element is 30px (16 * 1.5). This is because the font-size of the html element isn't declared; hence, it takes the default value.

  3. Percentage (%): This unit is relative to the parent element's size. It is commonly used for the width and height of elements. Take a look at the code below:

    div {
width: 200px;
}
div p {
width: 50%;
}

    Since the parent element's width, div is 200px, the inner paragraph, p, is 100px (200 * 0.5).

  4. Viewport width (vw): This works similarly to the percentage unit but is relative to the width of a device's entire visible screen. 100vw is 100% of the screen's visible area width. This means that if you resize your browser to 840px, 100vw will become 840px, and 10vw will be 84px.

  5. Viewport height (vh): This unit is relative to the height of the total visible area of a screen. It is similar to the vw unit; the difference is that vh is related to the height and not width. For example: 

    div {
height: 50vh;
}

    The div element above will fill 50% of the viewport's height. Therefore, if the browser window is 700px high, the div's height will be 350 pixels.

  6. Character unit (ch): This unit is defined as the with of the character zero (0).

  7. Ex (ex): This is a rarely used unit. It is relative to the x-height of the currently used font. It is the height of the character "x" or half of 1em.

  8. Viewport minimum (vmin) and Viewport maximum (vmax): The vmin and vmax units are based on the viewport height and width values.
    10vmin is 10% of the smallest dimension of the viewport, and 25vmax is 25% of the largest dimension of the viewport. For instance, a browser window is set to 2400px width and 800px height. In this case, 1vmin is 8px (1% of vh, which is smaller at 800px). Meanwhile, 1vmax is 24px (1% of vh, which is the larger value at 2400px).

Conclusion

The article does not contain all the measurement units but a wide range of the most used units. Also, it is essential to note that though it is highly encouraged to use relative units for widths and heights of elements, the choice of the unit to be used depends on various factors like the developer's choice, design specification, team rule, or task.

Thanks!! Gracias!! Obrigado!!!

If you found this article helpful, confusing or exciting, please let me know in the comments section 👇. I would love to hear your opinions on this article and what next you would love to read.

CSS3CSSWeb Developmentmedia queriesflexbox