What is the purpose of including "everyone" in @media rules?

So you see that many code examples do something like

@media all and (max-width:640px) {
    div {
        background-color:red;
    }
}

Now afaik, the keywords "all" and "screen" and some others are intended to select the type of device to which this refers, and the line should only contain logical output.

Since "everything" is applicable to each device, it can be assumed that its always 1 and (1 & x) are always equal to x, so "everything and" should not have any meaning.

I tried

@media (max-width:640px) {
    div {
        background-color:red;
    }
}

and at least my browsers agree. What else should I know?

+4
source share
2 answers

See specification: https://www.w3.org/TR/css3-mediaqueries/

HTML4. HTML4: "aural", "braille", "handheld", "print", "projection", screen, tty, tv. CSS2 , . , ' , .

...

-, ; " ( " ). , , "".

/* I.e. these are identical: */

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

/* As are these: */

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

, : 'tty', 'tv', 'projection', 'handheld', 'braille', 'embossed', 'aural' - 4.

+1

: , : , : , , .. : , "" .

, all, , . , , .

, screen. , , , .

all, all.

@media screen {
  div {
    color: blue;
  }
  .print{
    display: none;
  }
}

@media print and (min-width: 200px){
  div{
    color: tomato;
  }
  div.not('.example'){
    display:none !important;
  }
  .print{
    display: block;
  }
}
<div class="example">
  <div>Try printing me. See if this blue color appears while printing</div>
  <div class="print">I am only visible while printing.</div>
</div>  
  
0

Source: https://habr.com/ru/post/1629983/


All Articles