HTML and CSS Reference
In-Depth Information
aspect-ratio/device-aspect-ratio
.
Apply styles based on aspect ratio or
device aspect ratio. The former is defined as the ratio of
width
over
height
,
and the latter is defined as the ratio of
device-width
over
device-height
.
orientation
.
Apply styles based on whether the target device is in portrait
or landscape mode. This feature is useful for targeting different layouts on
devices like iPads, Android phones, and other tablets and smartphones
that change between portrait and landscape when you change the way
you hold them.
min
/
max-resolution
.
Apply styles based on minimum and maximum device
resolutions. This is useful if you want to, for example, serve larger icons
and increase text size on devices with high resolutions, like iPhones with
retina displays.
min
/
max-device-pixel-ratio
.
A proprietary Apple media feature that is
similar to
min-
and
max-resolution
but seems better supported currently.
Yo u c a n fi n d a f u l l l i s t of f m e d i a f e a t u r e s a t
w w w.w 3 . o r g / T R /c s s 3 - m e d i a q u e r i e s /
APPLYING SOME MEDIA QUERIES TO THE EXAMPLE
Let's return to the Media Blitz example and improve it at different screen
widths using media queries. You can see the final result of these additions in
media-blitz-3-with-media-queries.html and media-blitz3.css. At the bottom of
this new CSS file, you'll find a series of
@media
blocks that kick in when the screen
width decreases below certain thresholds. I won't cover every ruleset inside these
blocks in excruciating detail, because each is pretty obvious, but let's just look at
the whole of the first one to help you get the idea:
@media all and (max-width: 1024px) {
nav {
float: none;
width: 100%;
margin-left: 0;
}
