Nesting media queries with CSS

Question

Nesting media queries with CSS

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I'm thinking about nesting several media queries within a single one, something like:

@media (width: 1024px){
  @media (heigth:300px){
     //codigo
  }

  @media (heigth:600px){
     //codigo
  }
}

It would be possible or should be done of this type:

@media (width: 1024px) and (height: 300px){
   //codigo
}


@media (width: 1024px) and (height: 600px){
   //codigo
}

html5 html css3

asked by Jogofus 21.11.2017 в 00:04

source

2 answers

Problem when trying to compile in Xamarin Studio in Windows 7 WCF c # invoke it in IONIC

score 0 · Answer 1

As far as I can can not be nested . You should use the second form and the syntax is not correct either, it indicates if they are maximum or minimum measures together with the width or height . For example:

@media (max-height: 900px) and (max-width: 500px) {
    /* Tu CSS aquí */
}

You can watch tutorials on the use of media-queries like these: link link

score 0 · Answer 2

If we look at the CSS3 specifications , there is a section in which it deals with this subject. They call it Processing of conditional group rules .

According to the example provided by the specification (own translation):

For example, with this set of nested rules:
@media print { // rule (1)
  /* hide navigation controls when printing */
  #navigation { display: none }
  @media (max-width: 12cm) { // rule (2)
    /* keep notes in flow when printing to narrow pages */
    .note { float: none }
  }
}
The condition of the marked rule (1) is true for printed media, and the condition of the marked rule (2) is true when the width of the print area (which for printed media is the page box) is lower ao equal to 12cm. Therefore, the rule '#navigation {display: none}' applies whenever this style sheet is applied to printed media, and the rule '.note {float: none}' is applied only when the stylesheet is applied to printed media and the width of the frame of the page is less than or equal to 12 centimeters.

IMPORTANT NOTE: Remember that the order of media queries is important and, therefore, they have to go from less to more restrictive in descending order (the order of CSS). That is, if you have a max-width of 600px as a restriction and another of 400px you should first go to the 600px.