Responsive Design - Media Queries and Units

Responsive Design with Media Queries

Learn How to Use Media Queries and Responsive Units

1. What is Responsive Design?

Responsive design is a method for designing websites that ensures they look great on all devices by adjusting their layout and content depending on the screen size. Using CSS media queries, flexible grids, and responsive units helps make websites adaptable.

2. Mobile-First Design Approach

The mobile-first design approach starts with designing for small screens and then adds styles for larger screens using media queries. This helps ensure the website is optimized for mobile devices and progressively enhanced for desktops and tablets.

Example: Start with mobile styles, then enhance with larger screen styles using media queries.

3. Using Media Queries

Media queries are used to apply different styles depending on the device's characteristics such as its width, height, or screen orientation. Below is an example of how to use media queries:

/* Default mobile-first styles */
body {
    font-size: 1rem;
}

/* Media query for devices with max-width 480px (small screens) */
@media (max-width: 480px) {
    body {
        font-size: 1.2rem;
    }
}

/* Media query for devices with max-width 768px (tablets) */
@media (max-width: 768px) {
    body {
        font-size: 1.5rem;
    }
}

/* Media query for devices with min-width 1024px (desktops) */
@media (min-width: 1024px) {
    body {
        font-size: 2rem;
    }
}
                

4. Responsive Units

CSS provides several units that make it easier to create responsive designs:

• % - Relative to the parent element's size.
• vh - Relative to the viewport height.
• vw - Relative to the viewport width.
• em - Relative to the font-size of the element.
• rem - Relative to the font-size of the root element (typically ``).

Example: Using viewport width (`vw`) for responsive design:

This text scales with the viewport width (5vw).

5. Putting It All Together

Now that you know how to use media queries and responsive units, here's how everything works together:

This layout adjusts according to the screen size:

This is a responsive box!