CSS Media Queries

What are CSS Media Queries?

CSS media queries are a technique that allows web page styles to adapt to changing media and device properties. By embedding media queries in CSS, we can define different style rules for different devices and screen sizes, thus achieving responsive design. Using media queries can improve the user experience and usability of web pages across different devices.

Media Query Syntax

The syntax of a media query typically includes the following parts:

@media keyword: Indicates this is a media query.
Media type: Specifies the device or media type to which the styles apply, such as screen, print, speech, etc.
Media attributes: Defines the characteristics of the media query, such as width, height, and orientation.
Style rule: Defines the styles to be applied when the media query conditions are met.

Here is a simple media query example:

@media screen and (max-width: 600px) { 
body { 
background-color: lightblue; 
} 
}

In this example, we define a background color style rule for screen widths less than 600px.

Common Media Attributes

1. `width` and `height`

The width and height attributes are used to specify the width and height of a device, allowing different styles to be applied based on the device size.

@media screen and (max-width: 768px) {
/* Styles applied when the width is less than 768px */ 
} 

@media screen and (min-width: 1024px) {
/* Styles applied when the width is greater than or equal to 1024px */ 
}

2. `orientation`

orientation attribute specifies the device orientation. Possible values are landscape (horizontal) and portrait (vertical).

@media screen and (orientation: landscape) {
/* Styles applied in landscape mode */ 
} 

@media screen and (orientation: portrait) {
/* Styles applied in portrait mode */ 
}

3. `device-width` and `device-height`

device-width and device-height attributes specify the device screen width and height.

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles applied to screen widths between 320px and 480px */ 
}

4. `max-device-aspect-ratio` and `min-device-aspect-ratio`

max-device-aspect-ratio and min-device-aspect-ratio features specify the device screen aspect ratio.

@media screen and (min-device-aspect-ratio: 16/9) { 
/* Styles applied when the screen aspect ratio is greater than or equal to 16:9 */
}

Nesting Media Queries

In actual development, different media features can be combined to form more complex media query conditions. Media queries support nesting, allowing you to nest multiple conditions for more precise style matching.

@media screen and (max-width: 768px) and (orientation: portrait) {
/* Styles applied when the width is less than 768px and in portrait mode */ 
}

Responsive Design Example

Here’s a simple responsive design example that applies different background colors depending on the screen width:

@media screen and (max-width: 768px) {
body {
background-color: lightblue;
} 
} 

@media screen and (min-width: 768px) and (max-width: 1024px) {
body {
background-color: lightgreen;
} 
} 

@media screen and (min-width: 1024px) { 
body { 
background-color: lightyellow; 
} 
}

In this example, when the screen width is less than 768px, the background color is light blue; between 768px and 1024px, the background color is light green; when the screen width is greater than or equal to 1024px, the background color is light yellow.