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 /
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;
Search WWH ::

Custom Search