Using Percentages, VW, VH, EM, REM in CSS

When working with CSS, it’s important to understand the different units you can use for setting sizes, margins, paddings, and other layout properties. In this article, we’ll explore four common units: percentages, vw (viewport width), vh (viewport height), em, and rem.

1. Percentages

The percentage unit is commonly used to specify sizes relative to the parent element. It is often used in layouts to make elements more flexible and responsive.

            .element {
                width: 50%; /* 50% of the parent element's width */
            }

In this example, the width of the element is set to 50% of its parent container's width. If the parent container changes its width, the element's width will adjust accordingly.

2. Viewport Width (vw)

The vw unit is based on the width of the viewport (the visible area of the browser window). 1vw is equal to 1% of the viewport width.

            .element {
                width: 50vw; /* 50% of the viewport width */
            }

In this example, the element's width will always be 50% of the current width of the browser window. As the user resizes the browser, the element's width will change dynamically to maintain this 50% ratio.

3. Viewport Height (vh)

The vh unit works similarly to vw, but it is based on the height of the viewport. 1vh is equal to 1% of the viewport height.

            .element {
                height: 50vh; /* 50% of the viewport height */
            }

Here, the height of the element will be 50% of the visible height of the browser window. If the user changes the window size vertically, the element's height will adjust accordingly.

4. EM

The em unit is relative to the font size of the current element. 1em is equal to the current font size of the element.

            .element {
                font-size: 2em; /* 2 times the font size of the parent element */
            }

In this example, if the font size of the parent element is 16px, the font-size of the element will be 32px (2 times 16px). If the font size of the parent element changes, the element's font size will change proportionally.

5. REM

The rem unit is similar to em, but it is always relative to the root element (usually the html element). 1rem is equal to the font size of the root element, which is typically 16px unless otherwise specified.

            .element {
                font-size: 2rem; /* 2 times the root font size */
            }

In this example, if the root font size is 16px, the element's font size will be 32px. The advantage of using rem is that it provides a more predictable way to control sizing, especially when the font size of the root element is defined explicitly.

Summary of Units

Here's a quick summary of the units discussed:

  • %: Relative to the parent element.
  • vw: Relative to 1% of the viewport width.
  • vh: Relative to 1% of the viewport height.
  • em: Relative to the font size of the current element.
  • rem: Relative to the font size of the root element.

Conclusion

Choosing the right unit for your CSS properties can greatly affect the responsiveness and scalability of your web design. By understanding and using percentages, vw, vh, em, and rem effectively, you can create layouts that are flexible, accessible, and optimized for various screen sizes.




Advertisement