DEV Community

Dhanush P
Dhanush P

Posted on

CSS Media Query (@media)

#webdev #css #html #frontend

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
manju_devi_93d3af8012a762 profile image
The world of coding •

Best content 👍🏻