Modern Web Engineerinng

[munem15-4873]

CSS3 Media Queries


Above are a few examples of how media queries, both from CSS 2.1 and
CSS3 could work. Let's now look at some specific how-to's for using CSS3
media queries to create responsive Web designs. Many of these uses are
relevant today, and all will definitely be usable in the near future.

The min-width and max-width properties do exactly what they suggest.
The min-width property sets a minimum browser or screen width that a
certain set of styles (or separate style sheet) would apply to. If anything is
below this limit, the style sheet link or styles will be ignored. The maxwidth
property does just the opposite. Anything above the maximum
browser or screen width specified would not apply to the respective media
query.

Note in the examples below that we're using the syntax for media queries
that could be used all in one style sheet. As mentioned above, the most
efficient way to use media queries is to place them all in one CSS style
sheet, with the rest of the styles for the website. This way, multiple requests
don't have to be made for multiple style sheets.

1 @media screen and (min-width: 600px)
{
2 .hereIsMyClass {
3 width: 30%;
4 float: right;
5 }
6 }

The class specified in the media query above (hereIsMyClass) will work
only if the browser or screen width is above 600 pixels. In other words, this
media query will run only if the minimum width is 600 pixels (therefore,
600 pixels or wider).

1 @media screen and (max-width: 600px)
{
2 .aClassforSmallScreens {
3 clear: both;
4 font-size: 1.3em;
5 }
6 }

Now, with the use of max-width, this media query will apply only to
browser or screen widths with a maximum width of 600 pixels or narrower.
While the above min-width and max-width can apply to either screen
size or browser width, sometimes we'd like a media query that is relevant to
device width specifically. This means that even if a browser or other viewing
area is minimized to something smaller, the media query would still apply
to the size of the actual device. The min-device-width and max-devicewidth
media query properties are great for targeting certain devices with
set dimensions, without applying the same styles to other screen sizes in a
browser that mimics the device's size.

1 @media screen and (max-device-width: 480px) {
2 .classForiPhoneDisplay {
3 font-size: 1.2em;
4 }
5 }
1 @media screen and (min-device-width: 768px) {
2 .minimumiPadWidth {
3 clear: both;
4 margin-bottom: 2px solid #ccc;
5 }
6 }


There are also other tricks with media queries to target specific devices.
Thomas Maier has written two short snippets and explanations for
targeting the iPhone and iPad only:
• CSS for iPhone 4 (Retina display)
• How To: CSS for the iPad

For the iPad specifically, there is also a media query property called
orientation. The value can be either landscape (horizontal orientation) or
portrait (vertical orientation).

1 @media screen and (orientation: landscape) {
2 .iPadLandscape {
3 width: 30%;
4 float: right;
5 }
6 }
1 @media screen and (orientation: portrait) {
2 .iPadPortrait {
3 clear: both;
4 }
5 }

Unfortunately, this property works only on the iPad. When determining the
orientation for the iPhone and other devices, the use of max-devicewidth
and min-device-width should do the trick.


There are also many media queries that make sense when combined. For
example, the min-width and max-width media queries are combined all
the time to set a style specific to a certain range.

1 @media screen and (min-width: 800px) and (max-width: 1200px) {
2 .classForaMediumScreen {
3 background: #cc0000;
4 width: 30%;
5 float: right;
6 }
7 }

The above code in this media query applies only to screen and browser
widths between 800 and 1200 pixels. A good use of this technique is to
show certain content or entire sidebars in a layout depending on how much
horizontal space is available.

Some designers would also prefer to link to a separate style sheet for
certain media queries, which is perfectly fine if the organizational benefits
outweigh the efficiency lost. For devices that do not switch orientation or
for screens whose browser width cannot be changed manually, using a
separate style sheet should be fine.

You might want, for example, to place media queries all in one style sheet
(as above) for devices like the iPad. Because such a device can switch from
portrait to landscape in an instant, if these two media queries were placed
in separate style sheets, the website would have to call each style sheet file
every time the user switched orientations. Placing a media query for both
the horizontal and vertical orientations of the iPad in the same style sheet
file would be far more efficient.
Another example is a flexible design meant for a standard computer screen
with a resizable browser. If the browser can be manually resized, placing all
variable media queries in one style sheet would be best.
Nevertheless, organization can be key, and a designer may wish to define
media queries in a standard HTML link tag:

1 <link rel="stylesheet" media="screen and (max-width: 600px)"
href="small.css" />
2 <link rel="stylesheet" media="screen and (min-width: 600px)"
href="large.css" />
3 <link rel="stylesheet" media="print" href="print.css" />

Source:   Smashing eBook􁴹Modern Web Design and Development