From the course: Advanced CSS Media Queries

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Including aspect ratio in media queries

Including aspect ratio in media queries - CSS Tutorial

From the course: Advanced CSS Media Queries

Start my 1-month free trial

Including aspect ratio in media queries

“

- [Instructor] The aspect ratio is the ratio of the width to the height of a given browser window. You've seen aspect ratios before. For example, when you watch movies, the widescreen view indicates a ratio of 16 units wide, nine units height. Those units could be in pixels, inches, centimeters, pretty much any unit will do. The most common aspect ratios are the widescreen 16 by 9, and a 4 by 3 ratio for standard TV. But there's many other ratios out there that are in common use. For example, one to one is a square, 16 by 10 is the default for my 15-inch MacBook Pro. You can leverage aspect ratios, and media queries as well. This might be particularly helpful if you're projecting a website on a screen. If you know your projector's aspect ratio, you can tweak your website's look accordingly. So let's try some examples with this current page layout here that might work with aspect ratio. As you might expect, as you saw with…

Contents