Overview
-
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.
Syllabus
-
Introduction
- Media queries aren't just screen size queries!
- Working with CodePen
- 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
- 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
- Next steps
