What is the @media selector in CSS for?

Question

I’d like to understand what the dial is for @media in CSS, as I have found in several codes and wanted to know if you have a specialty.

Answer 1

The @media known as media-query would be a condition to which you can specify an equipment, size, resolution, format, rotation, etc.

The use is simple:

@media(<condição>) {
    <css desejado para a condição>
}

The @media depending on the browser supports even more features, for example only supported in IE10+:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /*Aplica o estilo em navegadores IE10+ */
}

As soon as possible I will list the exclusive media-query properties of each browser/engine

---

Logical operators

You can compose media queries complex using logical operators, including and, only and not.

• The operator and is used to combine multiple functionalities into one media query, requiring each feature sequence to return true in order for the query to be true.

• The operator only is used to apply a style only if the entire query is equal, useful to prevent older browsers from applying the selected styles. If you use the operators not or only, you have to specify a type of explicit media.

• The operator not is used to deny a media query entire.

You can also combine multiple media queries in a comma-separated list, if any of the media queries in the list is true, all statement returns true, that is equivalent to an operator or.

---

Types of @media

• all which will run on any device
• print will run in print preview and at the time of printing will be rendered as in this format
• screen for conventional monitors
• speech intended for speech synthesizers.

Features for the @media

• width - Width of the viewport
• height - Height of the viewport
• aspect-ratio - Based on aspect ratio of width to view-port height
• orientation - Viewport orientation (usually based on width and height)
• resolution - Density of device pixels
• scan - Works as the device scan process works (for example, depends on frames)
• grid - If device uses grid or bitmap screen
• update - How often can the output device modify the appearance of the content (Level 4 Media Queries)
• overflow-block - How the output device handles the content that transhipps the viewport along the block axis (Level 4 Media Queries)
• overflow-inline - How much content that transhipps the viewport along the online axis can be rolled (Level 4 Media Queries)
• color - Number of bits per color component of the output device, or zero if the device is not colored "color-Gamut". Approximate range of colors that are supported by the user agent and the output device (Level 4 Media Queries)
• color-index - Number of entries in the color search table of the output device or zero if the device does not use this table
• display-mode - The application view mode as specified in the "manifest" display member (is a file) of the web application
• monochrome - Bits per pixel on the output device is monochrome frame buffer, or zero if the device is not monochrome
• inverted-colors - As user-agent or reversed colors of the operating system are underlying or not (Level 5 Media Queries)
• pointer - The main input mechanism is a pointing device and, if so, how accurate it is (Level 4 Media Queries)
• hover - The primary input mechanism allows the user to hover over elements (Level 4 Media Queries)
• any-pointer - Any available input mechanism is a pointing device and, if so, what accuracy (Level 4 Media Queries)
• any-hover - Some available input mechanism allows the user to hover over elements (Level 4 Media Queries)
• light-level - Ambient light level (Level 5 Media Queries)
• scripting - If scripts are enabled or not in your browser (for example javascript), you can use not to inform that the site only works with JS or enable alternatives if you do not have (Level 5 Media Queries)

---

Note: Media-querys can also be applied to elements <link>, for example:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="arquivo.css">

And they can also be applied to css added by @import, thus:

@import url("fineprint.css") print; /*aplica no preview de impressão ou no momento de gerar a impressão*/
@import url("bluish.css") projection, tv; /*aplica em projetos e televisores, provavelmente segunda tela conectada*/
@import "common.css" screen, projection; /*aplica tanto na tela principal quanto em projetores*/
@import url('landscape.css') screen and (orientation:landscape); /*aplica na primeira tela desde que a orientação esteja em landscape*/

---

Completion

So @media goes far beyond width and height, with @media you can combine various functionalities, operators, create specific conditions and get varied effects as needed.

Answer 2

@media works for you to determine a CSS style for each type of media that interests you.

The most common to see are the @media screen and @media print, one is to determine the CSS for screens and the other to determine a CSS only when printing the page.

You can also have a CSS for TV @media tv

The basic formatting would be like this

@media not|only mediatype and (media feature) {
    aqui vc coloca os estilos 
}

But you can also import CSS specific to the media query you want

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

The and|not|only serve to you determine that the CSS will only influence or not certain type of media.

Here’s a list for you to see media Feature: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Another reference link: https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Take an example:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      body {background: #ffffff}
}

This means that only when Screen orientation is vertical and the pixel width of View Port is between 481px and 1024px the background color will be white.

Other for printing:

@media print {
      body {background: #ffffff, color: #000000}
}

Here the CSS will only be applied when in print mode and will put the white background and the black font.