What is the @media selector in CSS?

The usage is simple:

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

% w / w% 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'll list the unique media-query properties of each browser / engine

Logical operators

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

• The only operator is used to combine multiple features in the same media query , requiring each sequence of characteristics to return true in order for the query to be true. p>

• The not operator 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 and or only operators, you have to specify an explicit media type.

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

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

Types of not

• or that will run on any device
• @media will run in the print preview and at the time of printing it will be rendered as in this format
• all for conventional monitors
• print for speech synthesizers.

Features for screen

• speech - Viewport width
• @media - Viewport Height
• width - Based on the aspect ratio of the width to the height of the view-port
• height - Viewport orientation (usually based on width and height)
• aspect-ratio - Device pixel density
• orientation - Works according to the device scanning process (eg depends on frames)
• resolution - Whether the device uses grid or bitmap screen
• scan - How often the output device can modify the appearance of the content (Level 4 Media Queries)
• grid - How the output device handles content that overflows the viewport along the axis of the block (Level 4 Media Queries)
• update - How much content that overflows the viewport along the inline axis can be rolled (Level 4 Media Queries)
• overflow-block - Number of bits per color component of the output device, or zero if the device is not color-gamut. Approximate range of colors that are supported by the user agent and output device (Level 4 Media Queries)
• overflow-inline - Number of entries in the output device color lookup table or zero if the device does not use this table
• color - The application view, as specified in the display member of the manifest (is a file) of the web application
• color-index - Bits per pixel on the output device is monochrome frame buffer, or zero if the device is not monochrome
• display-mode - As user-agent or the inverted colors of the operating system are underlying or not (Level 5 Media Queries)
• monochrome - The main input mechanism is a pointing device, and if so, how precise it is (Level 4 Media Queries)
• inverted-colors - The primary input mechanism allows the user to move the mouse over elements (Level 4 Media Queries)
• pointer - Any available input mechanism is a pointing device, and if so, what is the accuracy (Level 4 Media Queries)
• hover - Some available input mechanism allows the user to move the mouse over elements (Level 4 Media Queries)
• any-pointer - Level 5 Media Queries
• any-hover - If scripts are enabled in your browser (for example javascript), you can use light-level 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 scripting elements, for example:

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

And they can also be applied to css added by not , like this:

@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*/

Conclusion

Then <link> goes far beyond width and height, with @import you can combine various features, operators, create specific conditions and get varied effects as needed.

@media works for you to determine a CSS style for each type of media you're interested in.

The most common ones 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 it will print the page.

You can also have a CSS only 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 the specific CSS to the media query you want

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

and | not | only

Here's a list to check out the media feature : link

Another reference link: link

See 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 the Screen Orientation is vertical and the pixel width of the 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 font black.