CSS Units Extravaganza: A Kaleidoscopic Tour of Dimensions and Metrics - Scratch My Dev

Greetings, pixel pioneers, em explorers, and vw voyagers! Today, we embark on an enchanting odyssey through the vibrant landscape of CSS units. From pixels to ems, and from percentages to the exotic realms of pt, in, cm, and more, join us in unraveling the kaleidoscopic tapestry that adds depth and dimension to your web styles.

Pixel Power - The Digital Dynamo:

Our journey begins with the digital dynamo—the humble pixel. Picture it as the LEGO brick of the web world, offering a precise and fixed unit for creating pixel-perfect designs:

.element {
  width: 300px; /* Set the width to 300 pixels */
  height: 200px; /* Set the height to 200 pixels */
}

Pixel precision is perfect for creating sharp, defined structures on your web canvas.

Embracing Em - The Dynamic Chameleon:

Enter the realm of em, a dynamic unit that adapts and scales with its parent element’s font size. It’s like a chameleon, changing its size based on the context:

.parent {
  font-size: 16px; /* Set the font size of the parent */
}

.child {
  font-size: 2em; /* The child’s font size is 2 times the parent’s font size
                     (32px) */
}

Ems create a harmonious, scalable harmony, perfect for responsive designs. Pay attention to nested elements that could be targeted by your selector that sets the font-size in em. For example, if you have an element with a child class inside another element with also a child class, the nested element would be 64px (16 * 2 *2).

The Resilient Rem - Rooted in the Document:

Meet the resilient rem, a unit rooted in the font size of the document’s root. Unlike ems, rems don’t depend on their parent’s font size:

body {
  font-size: 16px; /* Set the document’s root font size */
}

.element {
  font-size: 1.5rem; /* The element’s font size is 1.5 times the root’s font size
                        (24px) */
}

Rems provide consistent scaling, making them a sturdy choice for modern layouts. Using rems allows you to avoid exponentially growing nested elements mentioned for ems.

The Viewport Voyage - Venturing into vw and vh:

Embark on a voyage into the world of viewport units—vw (viewport width) and vh (viewport height). Picture them as a magical measuring tape that scales with the size of the browser window:

.element {
  width: 50vw; /* Set the width to 50% of the viewport width */
  height: 75vh; /* Set the height to 75% of the viewport height */
}

Viewport units let your styles adapt gracefully to the ever-changing dimensions of the screen.

The Dynamic Viewport - dvw and dvh:

Now, let’s delve into the dynamic viewport units—dvw (dynamic viewport width) and dvh (dynamic viewport height). These units are like vw and vh, but they dynamically adjust based on the viewport’s smaller dimension, making them perfect for responsive design on mobile:

.body {
  min-height: 100dvh; /* Set the min height to 100% of the dynamic
                         viewport height */
}

They can be useful on mobile as they adapt to the browser’s « real » size. Allow me to explain; Have you ever noticed that when you arrive on a website, usually your browser shows a bar either at the top or the bottom of the screen. That bar contains the website’s URL and actions button. Now when you start scrolling, that bar disappears (on modern smartphones at least) so you can enjoy reading without distraction. Now, imagine you set your body to a height of 100vh. When you first load your website en mobile, you will notice that your page does indeed take up all of the height of your screen, BUT a small portion of the page is hidden by the URL bar mentioned earlier. You have to start scrolling to make it disappear and the small part that was hidden by it, finally shows up. Now if you set your body to 100dvh, it will take up all the height of the browser, minus the URL bar. When you start scrolling and the bar disappears, the height of your page will adjust automatically to the « new » browser’s height. You might notice this slight change when scrolling, you have to be aware of that behavior and determine if that’s what you really want.

The Dynamic Percent - A Percentage’s Dance:

Dive into the dance of percentages, a classic unit that scales based on its parent container. It’s like a percentage share of the pie:

.container {
  width: 80%; /* The container takes 80% of its parent’s width */
}

Percentages are versatile, fitting snugly into the responsive design toolkit.

The Print Prodigy - Points, Inches, Centimeters and Millimeters:

Now, let’s journey into the world of print with pt (points), in (inches), cm (centimeters) and mm (millimeters). These units are perfect for crafting styles tailored for the printed page:

.print-element {
  font-size: 12pt; /* Set the font size to 12 points */
  width: 3in; /* Set the width to 3 inches */
  margin: 1cm; /* Set the margin to 1 centimeter */
  padding: 5mm; /* Set the padding to 5 millimeter */
}

These units bring precision and control to your print styles, ensuring a delightful experience on paper.

As we conclude our kaleidoscopic tour through CSS units, you’ve now become a master of dimensions and metrics, navigating the diverse landscapes of the digital and print realms. Each unit brings its unique charm to the grand orchestra of web styling. Experiment, mix and match, and may your web compositions be as rich and varied as the units that compose them. Happy coding, and may your designs be ever-dimensional! 🌐🎨✨

Photo of Darling Arias on Unsplash