What are the media queries in CSS?

Media queries are a part of responsive web design, allowing to apply CSS rules  on the characteristics of the device or media being used to view a web page. They enable presentations to a specific range of output devices without changing the content itself. Acting as a conditional logic for CSS, media queries test for the conditions of particular media features.

A media query consists of a media type (like screen or print, defaulting to all) and one or more expressions that check for conditions of specific media features. The CSS rules within the media query block are only applied if the specified conditions are met.

Media queries uses

• Linking an external stylesheet using the <link> element with a media attribute containing the query logic.
• Using the @import directive within a CSS file.
• Using the @media rule directly within an embedded style element or a CSS stylesheet. The @media rule is often used for demonstration as it’s clearer.

The general structure using the @media rule is:

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
} /* */

Media Queries for Different Screen Sizes

One of the most common uses is to target different screen sizes, based on viewport width or height, allows  to change layouts, element sizes, or other styles depending on the available space. Key media features for size include:

• width: Describes the width of the viewport.
• min-width: Applies styles if the viewport is at least a certain width.
• max-width: Applies styles if the viewport is no more than a certain width.
• height: Describes the height of the viewport.
• min-height: Applies styles if the viewport is at least a certain height.
• max-height: Applies styles if the viewport is no more than a certain height.

Sizes using various CSS length units like px, em, rem, or percentages.

Device Dimensions: Features like device-width and device-height measured the physical screen dimensions slightly than the browser viewport. They were censured in Media Queries Level 4, and using width and height is now recommended.

Design changes significantly based on size is called a “breakpoint”. breakpoints should ideally be guided by the design itself, rather than specific devices. A common practice is to define base styles outside any media query and then use media queries to add changes for wider viewports.

Examples for Screen Size:

Applying styles when the viewport is at least 720px wide:

@media screen and (min-width: 720px) {
  body {
    background-color: skyblue;
  }
} /* */

Applying styles only for viewports between 300px and 767px wide:

@media only screen and (min-width: 300px) and (max-width: 767px) {
  .site-title {
    font-size: 80%;
  }
  /* Styles in this block are only applied if the screen size is at least 300px wide, but no more than 767px */
} 

Changing a grid layout for screens 700px or wider:

@media screen and (min-width: 700px) {
  .container {
    grid-template:
      "header header" 100px
      "aside main" 1fr
      "footer footer" 100px
      / 200px 1fr
    ;
  }
} 

Resizing an image based on width range:

@media screen and ( max-width: 1024px ) { img.responsive { width: 200px; } }
@media screen and ( min-width:1025px ) and ( max-width: 1280px ) { img.responsive { width: 300px; } }
@media screen and ( min-width: 1081px ) { img.responsive { width: 400px; } }
img.responsive { height: auto; } /* - Note the typo in source for the last min-width, corrected here */

Applying styles for a specific viewport height:

@media (height:500px){/* styles */} 

Media Queries for Orientation

The orientation media feature allows you to apply styles based on whether the viewport is in portrait or landscape mode. portrait means the height is greater than or equal to the width, while landscape means the width is greater than the height. If you define styles for one orientation within a media query, styles outside that query often apply to the opposite orientation by default.

Examples for Orientation:

Targeting devices in portrait orientation:

@media (orientation: portrait) {
    /* Styles for portrait orientation */
} /

Targeting screen devices in portrait orientation:

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />
<!-- This media query is asking "Are you a screen and is your orientation portrait?". --> /* */

Targeting screens in landscape orientation:

@media screen and (orientation: landscape) {
    /* Styles for screens in landscape */
} /* Based on */

Media Queries for Resolution

Media queries can also test for the resolution of the output device using the resolution media feature. This is  useful for targeting high-resolution displays, sometimes referred to as Retina screens. You can specify a minimum (min-resolution) or maximum (max-resolution) resolution.

Resolution can be specified in units such as dpi (dots per inch) or dpcm (dots per centimetre). The unit dppx (dots per pixel) is also mentioned. The min-device-pixel-ratio feature is also listed as testing for pixel rate.

Examples for Resolution:

Targeting devices with a minimum resolution of 2 dots per pixel:

@media (min-resolution: 2dppx) {
    /* Styles for high-resolution displays */
} /* */

Targeting print output with a resolution of 300 dpi:

@media print and (resolution: 300dpi) {
    /* Styles for print at 300 dpi */
} /* */

Targeting a specific resolution:

@media (resolution: 300dpi) {
    /* Styles for 300 dpi */
} /* */

Combining Media Queries

combine multiple media features within a single query using the and keyword. All conditions joined by and must be true for the styles to apply.

Combining with and:

Example

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />
<!-- This loads the stylesheet if it's a screen AND in portrait orientation AND has a minimum width of 800px. --> /* */
@media screen and (min-width: 641px) and (max-width: 1023px) {
    /* Styles for screen devices with viewports between 641px and 1023px wide */
} /* */

Listing with Comma (OR):

list multiple, separate media queries, separated by commas. If any of the listed queries are true, the styles will be applied. The comma effectively acts like an or command.

Example

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="styles.css" />
<!-- This loads the stylesheet if it's a screen in portrait and >= 800px OR if it's a projection device. --> /* */

In the example above, when a query in the list does not include any expressions in parentheses, it applies to all devices of that media type.

Media queries are a powerful tool, widely supported in modern browsers, and are a core technique for creating responsive web designs that adapt to various screen sizes, orientations, and resolutions. They Designers often use queries in conjunction with fluid layouts (using relative units) to create designs that flex and adapt smoothly.