Advanced CSS Media Queries
1h 3mAdvanced2020-08-17
Authors
Jen Kramer
Teaches web design and development
Course details
While most web developers have encountered media queries as part of their work on responsive layouts, media queries offer many more options than just the size of the viewport. In this course, instructor Jen Kramer explores some of the latest and greatest media query options available to Chrome, Firefox, Edge, and Safari. Learn how to test for different styles of interaction, determine how devices are held, figure out what resolution they have, and combine these options to build better sites and apps. Jen also covers complex media queries using and, not, and comma-separated conditions. Plus, she shows you how to keep these choices from breaking your projects in older devices.
Skills covered
CSSWeb StandardsWeb DesignAdvancedFront-End Web DevelopmentWeb DevelopmentOpen Source
Concepts
Introduction
- Media queries aren't just screen size queries!
- Working with CodePen
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
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