Doubt regarding CSS selectors

Asked

Viewed 48 times

1

I started studying CSS a short time ago, and when analyzing the CSS of a page I came across the following excerpt:

@media (min-width:10px){
body{max-width:none}
}

I wonder what kind of selector is the @, and how this structure with parentheses (min-width:10px) works.

Thank you.

css css3 front-end

3 answers

2


According to the W3C

To rule @media, was introduced in CSS2, thanks to it it is possible to create different rules for different types of media. That is, monitors, mobile phones, 4K TV.

Example: You can create a rule from CSS to standard Desktop Monitors. Another rule for printing ( see, not just monitors ). Inclusive, rule for Smartphone and Smart TV

As Expressions

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:

UP TO the size width 480px, do what’s between the { CSS-COde }

Then from 0px to 480px, it will run the CSS code between the keys.

In your case:

From 10px to maximum screen size, it will run the CSS code between the keys.

  • Thanks Mt for the help!

1

This is a media querie in css, used to work with resolutions.

Example on 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>

0

Browser other questions tagged css css3 front-end

You are not signed in. Login or sign up in order to post.