CSS: Responsive Design

Responsive Design Techniques

CSS provides several techniques to make web pages responsive:

• Media Queries: Apply styles based on screen size or device type.
• Flexible Layouts: Use percentages or relative units for widths and heights.
• Viewport Meta Tag: Control the viewport's size and scaling.
• Responsive Images: Use max-width and height: auto for images.

Example: Media Queries

/* Example */
body {
    font-size: 16px;
}
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
}
        

This example adjusts the font size based on screen width.

Example: Responsive Images

/* Example */
img {
    max-width: 100%;
    height: auto;
}
        

This example ensures images scale proportionally within their container.

Practice

Try experimenting with responsive design techniques:

• Use media queries to adjust layouts for different screen sizes.
• Apply flexible units like em, rem, or percentages.
• Test your designs on various devices and resolutions.

Continue Learning

• Next: CSS Transitions & Animations