CSS media query operators

问题

Can some one explain to me in very simple terms what the operators and, not, only and the comma , mean and do in CSS?

回答1:

The four operators implement set theory logic. In that context, here is what each one means:

• ,: equivalent of 'union'; e.g. @media screen, print matches a screen or print device

• and: equivalent of 'intersection'; e.g. @media screen and (min-device-width: 1920px) matches a screen device with 1920px resolution

• not: equivalent of 'set difference'; e.g. @media not screen and (color) matches a device which is not a screen and supports color

• only: equivalent of a 'proper superset'; e.g. @media only screen and (color) matches a device which is only a screen and only supports color

References

• Nesting media queries | The Haystack

• Logic in Media Queries | CSS-Tricks

• Media Queries Level 4: Evaluating Media Queries

来源：https://stackoverflow.com/questions/5787287/css-media-query-operators