Advanced CSS Media Queries

Learn how to use media queries to test for interaction styles, determine how devices are held, figure out screen resolution, and combine these options to build sites and apps.

Introduction

• Media queries aren't just screen size queries!
• Working with CodePen

1. Understanding Media Features

• Understanding media in media queries
• Changing media in media queries
• Including width in media queries
• Including height in media queries
• Including aspect ratio in media queries
• Testing for monochrome devices
• Testing for screen orientation
• Testing for screen resolution
• Testing for hover and pointer

2. Complex Media Queries

• Testing for conditions with and
• Testing for conditions with not
• Testing for comma-separated conditions (or)
• Targeting specific devices using complex media queries
• Working with only
• Challenge
• Solution

Conclusion

• Next steps