CSS Media Queries? Things Most Tutorials Don't Show You

CSS Media Queries allows you to control how your webpages are styled, based on characteristics such as: viewport size and orientation, screen resolution, aspect ratio, whether or not the device has a pointer (typically a mouse), and various other things.

The three aspects to CSS Media Queries are:

  1. Media Types
  2. Media Features
  3. Logical Operators

The following video tutorial explores all three aspects in considerable detail. We even investigate the peculiar "not" and "only" logical operators. CSS Level 4 introduced some new and improved syntax which allows us to use comparison operators, and even to nest media queries inside one another.