CSS Media Query (@media)

CSS Media Query

• It is used to apply different styles based on the device's characteristics like screen size, orientation, or resolution.
• This makes your website responsive, ensuring it looks good on all devices, including desktops, tablets, and smartphones.
• It allow you to apply CSS styles depending on a device's media type (such as print vs. screen)

How Do Media Queries Work?

• A media query consists of a media type (like screen, print) and conditions (like screen width or orientation).
• If the conditions are true, the specified styles will be applied.
• You use the @media rule in your CSS to define these conditions.

Syntax

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

Common Breakpoints

Device Type       Screen Size Range
Mobile Devices          320px - 480px
Tablets/iPads           480px - 768px
Laptops/Small Screens   768px - 1024px
Desktops/Large Screens  1024px - 1200px
Extra-large Devices    1200px and above

Media Types
all: It is the default media type. It is used for all media type devices.
print: It is used for printer devices.
screen: It is used for computer screens, mobile screens, etc.
speech: It is used for screen readers that read the page.[TBD]

Note : The media-type is optional. However, if you use not, you must also specify a media-type.

Logical Operators

• The logical operators not, and, only, and or can be used to compose a complex media query.
• You can also combine multiple media queries into a single rule by separating them with commas.

and

• It requiring each chained media feature to return true for the query to be true.

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

not

• Used to negate a media query, returning true if the query would otherwise return false.

only [TBD]

• Applies a style only if an entire query matches.
• It is useful for preventing older browsers from applying selected styles.

or
If any of the queries in a list is true, the entire media statement returns true.

,(comma)

• Commas are used to combine multiple media queries into a single rule.
• Equivalent to the or operator.

@media screen, print {
  body {
    line-height: 1.2;
  }
}

Media Features

• There are many media features available to test for specific characteristics.
• Some examples.

width | min-width | max-width

• It can be used to test the width of the viewport.

/* Exact width */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* Minimum width */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/* Maximum width */
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

any-hover

• It can be used to test whether any available input mechanism can hover over elements.
• Keyword values : none , hover

HTML
<a href="#">Try hovering over me!</a>

CSS
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

orientation

• It can be used to test the orientation of the viewport.
• Keyword values : portrait , landscape

HTML
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

[https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using]
[https://www.geeksforgeeks.org/css/css-media-queries/]