CSS media query operators

Can some one explain to me in very simple terms what the opera开发者_JS百科tors and, not, only and the comma , mean and do in CSS?

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