Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design with CSS Units</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1200px; /* Maximum width using px */
            margin: 0 auto; /* Center the container */
        }

        h1 {
            font-size: 2rem; /* Font size using rem */
            color: #333;
        }

        p {
            font-size: 1em; /* Font size using em (relative to the parent) */
            line-height: 1.5; /* Line height using unitless value */
        }

        .responsive-box {
            width: 100%; /* Full width using % */
            max-width: 600px; /* Max width using px */
            padding: 20px; /* Padding using px */
            margin: 20px auto; /* Margin using px */
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 600px) {
            h1 {
                font-size: 1.5rem; /* Adjust font size for smaller screens */
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Responsive Design Using Different CSS Units</h1>
    <p>This paragraph demonstrates the use of <strong>em</strong> and <strong>rem</strong> for font sizes. It will scale based on the user's default font size settings.</p>

    <div class="responsive-box">
        <p>This box adjusts its size and padding using a combination of CSS units. Resize the window to see how it responds!</p>
    </div>
</div>

</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter