Modular Scaling
Rem units can be used in a modular way, allows for easy adjustments across different screen sizes by modifying the root font size.
Example: In this example HTML file along with CSS demonstrating the use of rem units in a modular way for responsive design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Modular Scaling with rem Units</title>
<style>
html {
font-size: 16px;
/* Base font size */
color: green;
}
h1 {
font-size: 2rem;
/* Double the
base font size */
}
p {
font-size: 1rem;
/* Equal to the
base font size */
line-height: 1.5;
/* Adjust line height
for readability */
}
@media (max-width: 768px) {
html {
font-size: 10px;
/* Adjust font size
for smaller screens */
color: red;
}
}
</style>
</head>
<body>
<div class="container">
<h1>w3wiki</h1>
<p>
This is a paragraph with some text.
It adjusts its size based on the root font size set in CSS.
You can see how it changes on different screen sizes.
</p>
</div>
</body>
</html>
Output:
What are Rem Units in CSS ?
Rem units in CSS are relative units of measurement. They stand for root em and are based on the font size of the root element (<html>). If the root font size is 16px, 1rem equals 16px. This ensures consistent, scalable sizing across different elements.
Table of Content
- Base Font Size
- Modular Scaling
- Consistent Spacing