CSS MEDIA QUERIES

MEDIA QUERIES: Enable web pages to adjust their layout and styles based on different screen sizes, devices, or orientations. They are essential for building responsive and adaptable web designs.

1. Apply CSS rules conditionally based on screen width or height.
2. Help create responsive layouts for mobile, tablet, and desktop devices.
3. Support conditions like orientation, resolution, and device type.
4. Improve user experience across different devices.

SYNTAX:

@media mediatype and (condition) { /* CSS styles */}

TYPES OF QUERIES IN CSS:

1. all.
2. print.
3. screen.
4. speech.

all: Suitable for all media devices.
print: Used for printers.
screen: Targeted at computer screens, tablets, smartphones, etc.
speech: Designed for screen readers that read the content aloud.

EXAMPLE:

@media(max-width:900px){

    .sidebar{
        display:none;
    }

    .center{
        width:60%;
    }

    .video-grid{
        grid-template-columns:1fr;
    }
}