Relative units (em, rem, %, vw, vh) in CSS express a size relative to another value. This makes them particularly useful for creating responsive and scalable designs
What is the em unit in CSS?
- The em unit is relative to the font size of the current element. For example, if the font size of an element is 16px, then 1em is equal to 16px, and 2em is equal to 32px.
- em units can lead to compounding issues where nested elements with em-based font sizes inherit and multiply their sizes relative to their parents, potentially resulting in unexpectedly large or small text.
- Despite this, em units are useful for creating components where the size and spacing scale proportionally with the component’s font size, especially for properties like padding, margin, and border-radius.
Example:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 24px = 24px */
}
.grandchild {
font-size: 0.8em; /* 0.8 * 24px = 19.2px */
padding: 0.5em; /* 0.5 * 19.2px = 9.6px */
}What is the RM unit in CSS?
- The rem unit stands for “root em” and is relative to the font size of the root (html) element. This helps to avoid the font size compounding issue associated with em units.
- By setting a base font size on the html element, you can consistently size text throughout your website using rem units. This makes it easier to create scalable typography and responsive designs.
Example:
html {
font-size: 16px;
}
.heading {
font-size: 2rem; /* 2 * 16px = 32px */
margin-bottom: 1rem; /* 1 * 16px = 16px */
}
.paragraph {
font-size: 1rem; /* 1 * 16px = 16px */
line-height: 1.5rem; /* 1.5 * 16px = 24px */
}What is % (Percentage) unit in CSS?
- Percentage units define sizes in parent objects or the current object dependent on the property. Properties like width and height, the percentage is usually relative to the size of the parent element. For font-size, it’s relative to the parent’s font size.
- We commonly use percentages to create fluid layouts where elements resize proportionally with their containers.
Example:
.container {
width: 500px;
height: 300px;
background-color: lightgray;
}
.child-element {
width: 50%; /* 50% of the parent's width (500px) = 250px */
height: 25%; /* 25% of the parent's height (300px) = 75px */
background-color: lightblue;
}
.text-container {
font-size: 16px;
}
.small-text {
font-size: 75%; /* 75% of the parent's font size (16px) = 12px */
}What is vw (Viewport Width) in CSS?
- The vw unit is relative to 1% of the width of the viewport. For example, 100vw is equal to the full width of the browser window, and 50vw is half of the viewport width.
- vw units are excellent for creating elements that scale with the viewport width, such as full-width banners or typography that adjusts to different screen sizes.
Example:
.full-width-banner {
width: 100vw;
height: 20vh; /* Uses vh unit as well */
background-color: orange;
}
h1 {
font-size: 5vw; /* Font size scales with the viewport width */
}What is the vh (viewport height) unit in CSS?
- The vh unit is relative to 1% of the height of the viewport. For example, 100vh represents the full height of the browser window, and 75vh is 75% of the viewport height.
- vh units are useful for creating layouts that fill the entire screen vertically or for elements whose height should be relative to the viewport height.
Example:
.full-height-section {
height: 100vh;
background-color: lightgreen;
}These relative units are creating responsive web designs that adapt to various screen sizes and resolutions. They allow for more flexible and scalable layouts compared to fixed units like pixels, especially when considering different devices and user preferences.
What is the difference between absolute and relative units in CSS?
In CSS, absolute units denote a fixed physical measurement. Their size constant regardless of any other styles or screen sizes. Examples include px (pixels), in (inches), cm (centimeters), mm (millimeters), pt (points), and pc (picas). Absolute units like inches and centimeters are most useful when the physical output is known, such as in printing. Pixels (px) are commonly used for screen-based layouts.
Relative units express a size relative to another value. Essential for creating responsive and scalable designs. Common relative units include em (relative to the current element’s font size), rem (relative to the root element’s font size), % (relative to the parent element or the element itself), vw (1% of viewport width), vh (1% of viewport height), vmin, and vmax (relative to the smaller and larger viewport dimensions, respectively), and fr (fractional unit in CSS Grid). Unlike absolute units, the actual size rendered by relative units will vary depending on their reference value.
CSS3 Topics