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.
Overview
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
Taught by
Jen Kramer
