4.1 Percentage Values
Percentage values and relative units in CSS play a crucial role in creating flexible and responsive layouts. They allow elements to adjust to different screen sizes and changing conditions, ensuring better compatibility and usability.
Percentage values are used to set element sizes relative to their parent elements' sizes. This makes the layout more flexible and adaptable.
Example of using %:
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* Aspect ratio 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* Aspect ratio 2:1 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of using %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="min-height: 200px;">
<div class="container">
<div class="box">Content</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of using %</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Content</div>
</div>
</body>
</html>
Code Explanation:
.container: sets the container width to 80% of the parent's width, centering it withmargin: 0 auto.box: sets the box width to 50% of the container. The height of the box is determined viapadding-top, ensuring an aspect ratio of 1:2
4.2 Relative Units (em and rem)
The em unit—is a relative unit that depends on the font size of the parent element. If the parent's font size changes, em values adjust accordingly.
Example of using em:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
The rem unit—is a relative unit that depends on the font size of the root element (html). It doesn't rely on parent elements, making it more predictable and handy for creating scalable layouts.
Example of using rem:
<div class="container">
Some text inside the container
<div class="box">
Some text inside the box
</div>
</div>
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
Comparing em and rem:
em: relies on the font size of the parent element, which can lead to cascading effects in nested elementsrem: relies on the font size of the root element (html), making it more predictable and easier to use
4.3 Combined Use of %
Using relative units (em and rem) alongside percentages allows for creating flexible and responsive layouts that display properly on any device.
Example: Combined Use of %
Let's create a layout where element sizes are determined using percentages and relative units.
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Use of % and Relative Units</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Code Explanation:
html: sets the base font size for the entire document.container: uses percentages to set the container width and center it on the page.headerand.footer: useremfor padding, making it predictable.content: uses Flexbox to arrange the sidebar and main content with a gap between them.sidebarand.main: use percentages for column widths andremfor padding
GO TO FULL VERSION