Advanced CSS Media Queries

Advanced CSS Media Queries

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 05m | 176 MB

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.

Table of Contents

1 Media queries aren’t just screen size queries!
2 Working with CodePen
3 Understanding media in media queries
4 Changing media in media queries
5 Including width in media queries
6 Including height in media queries
7 Including aspect ratio in media queries
8 Testing for monochrome devices
9 Testing for screen orientation
10 Testing for screen resolution
11 Testing for hover and pointer
12 Testing for conditions with and
13 Testing for conditions with not
14 Testing for comma-separated conditions (or)
15 Targeting specific devices using complex media queries
16 Working with only
17 Challenge
18 Solution
19 Next steps