Chapter 11: HTML Responsive Design & Media Queries

11.1 Introduction to Responsive Design

Responsive design ensures that web pages adjust smoothly across different screen sizes and devices, making content accessible on desktops, tablets, and mobile phones.

11.2 The Viewport Meta Tag

To ensure a web page is responsive, use the viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        

11.3 Using Flexible Layouts

Flexible layouts use percentages instead of fixed units like `px`.

Example:

    <style>
        .container {
            width: 80%;
            margin: auto;
            text-align: center;
        }
    </style>
        

11.4 Media Queries

Media queries allow CSS to apply different styles based on the screen size.

Example:

    <style>
        @media screen and (max-width: 768px) {
            .container {
                width: 100%;
                font-size: 14px;
            }
        }
    </style>
        

11.5 Responsive Images

Use the `max-width: 100%` property to make images scale properly.

Example:

    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
        

11.6 CSS Grid & Flexbox for Responsiveness

Grid and Flexbox help create responsive layouts.

Flexbox Example:

    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
        }
        .box {
            flex: 1;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
        

11.7 Summary

In this chapter, we covered:

• Importance of responsive design
• The viewport meta tag
• Using flexible layouts with percentages
• Media queries for different screen sizes
• Responsive images
• CSS Grid and Flexbox for layout