I started studying CSS shortly, and when I looked at the CSS of a page I came across the following excerpt:
@media (min-width:10px){
body{max-width:none}
}
I would like to know what kind of selector is @ , and how this structure with (min-width:10px) parts works.
Thank you.
The rule @media was introduced in CSS2, thanks to it it is possible to create different rules for different media types. That is, monitors, cell phones, 4K TV.
Example: You can create a CSS rule for default Desktop Monitors. Another rule for printing (see, it's not just monitors). Including, rule for Smartphone and Smart TV
See the syntax
@media not|only mediatype and (expressions) {
CSS-Code;
}
They are basically conditions. That is, when we use max-width: 480px , we say:
TO the size width of 480px, do what is between { CSS-COde }
Then from 0px to 480px, it will execute the CSS code between the keys.
In your case:
From 10px to the maximum screen size, it will execute the CSS code between the keys.
This is a media querie in css, used to work with resolutions.
Example on the desktop I have a title with size 50px and on mobile I want this title to be smaller.
Example:
h1 {
font-size:50px;
}
@media (max-width:990px) {
h1 {
font-size:18px;
background:red;
color:white;
}
}<h1>Teste media queries</h1> The simplest way to understand is that this command works as if it were a if . That is, if the screen has a minimum size of 10px it will occupy the maximum allowed size (% with%)
ref: link