Using media queries

Targeting media types

@media print { }
@media screen, print { }

Targeting media features

@media (hover: hover) { }
@media print and (orientation: portrait) { }
@media (max-width: 1250px) { }
@media (width <= 1250px) { }
@media (min-width: 30em) and (max-width: 50em) { }
@media (30em <= width <= 50em) { }
@media (30em < width < 50em) { }

Creating complex media queries

@media screen and (min-width: 30em) and (orientation: landscape) { }
@media not screen and (color), print and (color) { }
@media (not (screen and (color))), print and (color) { }
@media not all and (monochrome) { }
@media not (all and (monochrome)) { }