From the course: Advanced CSS Media Queries

Media queries aren't just screen size queries! - CSS Tutorial

From the course: Advanced CSS Media Queries

Start my 1-month free trial

Media queries aren't just screen size queries!

“

- [Jen] In May 2010, Ethan Marcotte wrote an article describing and defining responsive design as a technique including a grid-based layout, images that resize, and media queries. The technique swept the web community and before long, the approach was standard. Many developers learned about media queries for this reason, understanding that they were tied to breakpoints in a browser window's width. However, media queries go well beyond this and their capabilities expand every year. The media in media queries refers to screen, speech, print, or all of these. There are currently available and supported tests for screen orientation, aspect ratio, and the ability to hover in addition to many other options. Media queries are currently being expanded in modern browsers in the level four and level five specifications from the W3C. This course focuses on some of the options that are available to current versions of Chrome, Firefox, Edge, and Safari. With each passing month, there are more types of media queries that are supported, so keep an eye out on new tests as they become more widely available. Hi, I'm Jen Kramer. I have been working as a web developer and instructor for 20 years and I'm really intrigued by these new media query options. In this course, we'll dig into some of these newer media queries that you might not have heard about before. Looking at these options first individually, and then combining these into more complex media queries using and, not, and comma separated tests, including how to leverage complex media queries to identify specific types of devices. So if you're ready, let's get started with Advanced CSS Media Queries.

Contents