The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

18 Chapter 2

Selecting by aspect ratio is potentially fraught with caveats. For example,

some device manufacturers define widescreen as 16/9, some as 16/10, and

others as 15/10. And a device may not have the exact stated aspect ratio;

the iPhone 5S, for example, claims to have a 16/9 aspect ratio but actually

reports as having the slightly larger 40/71 ratio (the portrait orientation).

Using the max- and min- variations of aspect-ratio and device-aspect-ratio to

apply the rules may be preferable. Consider this code in which the rules

in the query are applied to any element that has an aspect ratio of greater

than 16/9 :

@media (min-device-aspect-ratio: 16/9) {...}

Media Features

You can chain multiple queries together on the same media type by adding

expressions with the and operator:

@media logic media and (expression) and (expression) { rules }

This syntax tests that both expressions are matched before applying the

selected rules. For example, to test for a narrow screen on a device with an

aspect ratio no greater than 15/10, you use this query:

@media (max-device-aspect-ratio: 15/10) and (max-width: 800px) {...}

You can also use a conditional “or” expression by adding extra queries

in a comma-separated list:

@media logic media and (expression), logic media and (expression) { rules }

This applies rules when any of the stated cases is true; in the following

example, the rules are applied to a screen in landscape orientation or to a

printed document in portrait orientation:

@media screen and (orientation: landscape), print and (orientation: portrait) {...}

You can also, of course, create any combination of these syntaxes.

Mobile-First Web Development

The common best-practice method of building websites today uses a

method known as mobile-first development, where we start developing for

smaller screens before adding larger assets and more complexity for users

accessing the site on larger devices.

The reason this method was adopted is because of the way that some

browsers load page assets, such as images, that are included in style sheets.