HTML Media Queries

What are Media Queries?

Media queries allow developers to apply CSS styles based on device characteristics.

They are commonly used for:

• Responsive layouts
• Mobile-friendly design
• Tablet optimization
• Desktop styling

Basic Syntax

@media(max-width:768px){

    body{
        background:red;
    }

}

How It Works

The CSS inside the media query runs only when the screen width is 768px or smaller.

Responsive Example

Resize the screen to see the color change.

Mobile First Design

Mobile-first means designing for mobile devices first, then adding styles for larger screens.

body{
    font-size:14px;
}

@media(min-width:768px){

    body{
        font-size:18px;
    }

}

Common Breakpoints

Responsive Flexbox Example

.container{
    display:flex;
}

@media(max-width:768px){

    .container{
        flex-direction:column;
    }

}