HTML CSS - Responsive Design

Making web pages responsive with CSS

Responsive design ensures that web pages look and function well on different devices and screen sizes. CSS provides various techniques and properties to create responsive layouts. This tutorial covers the basics of making web pages responsive with CSS.

Viewport Meta Tag

The viewport meta tag is essential for responsive design. It ensures that the web page is displayed correctly on different devices. Here is an example:

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

Media Queries

Media queries allow you to apply CSS rules based on specific conditions, such as screen width, height, resolution, and orientation. Here is an example:

/* Apply styles for devices with a maximum width of 600px */
@media (max-width: 600px) {
    .container {
        padding: 5px;
    }
}

/* Apply styles for devices with a minimum width of 601px */
@media (min-width: 601px) {
    .container {
        padding: 20px;
    }
}
            

Flexible Grids and Layouts

Flexible grids and layouts adjust to different screen sizes. You can use percentages, flexbox, or CSS Grid to create flexible layouts. Here is an example using flexbox:

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex: 1 1 100%;
}

@media (min-width: 600px) {
    .flex-item {
        flex: 1 1 50%;
    }
}

@media (min-width: 900px) {
    .flex-item {
        flex: 1 1 33.33%;
    }
}
            

Responsive Images

Responsive images adjust to the size of their container. You can use the max-width property to ensure images scale down appropriately:

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

Responsive Typography

Responsive typography ensures that text is readable on different devices. You can use relative units like ems or rems to achieve this:

body {
    font-size: 16px;
}

h1 {
    font-size: 2em; /* 32px */
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}
            

Summary

In this tutorial, you learned about making web pages responsive with CSS. You explored the importance of the viewport meta tag, using media queries, creating flexible grids and layouts, and making images and typography responsive. Understanding these techniques is essential for creating web pages that provide a great user experience on any device.