Basic CSS Media Query 101

Media queries allow you to test or check the width of a device viewport. This simple check is at the root of serving up the content or presentation you want to display based on the device in use.

Users access content with many different devices. These devices have different viewport aspect ratios (width and height) and different pixel densities. A developer must also take into account if the user is holding the device in portrait or landscape view.

Lets begin by looking a basic media query start point. You can use this approach to begin most responsive sites. Responsive, meaning the content adjusts based on the devices viewport. Are there other approaches than this? Yes, many; do what works for you.