Information Technology Reference
In-Depth Information
Media queries are something that, when used, feel like they should have been a part of
CSS from the very beginning. I have heard some friends of mine refer to media queries
as “freedom” and have even heard one developer I know—granted, after a very long
night of coding—refer to media queries simply as the new “black magic” of the digital
age. In reality, they are neither. Media queries serve as a tool that, when mastered, will
make your job as a developer easier and at the end of the day will give you a beautifully
flexible layout that instantly transforms to your user's viewing medium, right before your
eyes!
If you have worked with JavaScript or any other scripting or programming language of
the past, then media queries will probably be easy for you to learn. Basically, what one
is doing is assigning logic to their style sheets that will let the browser on the client side
do all of the heavy lifting when it comes to assigning the right template styles to the right
viewing device. The following is a very basic example of using CCS's media queries:
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" />
In this example, we are telling the client's browser to load the “portrait.css” stylesheet
when the browser is viewing the application, or website, from a mobile device that is in
the vertical position.
2
One is not limited to assigning media queries to the link tag. Media
queries can also be added directly to your device's CSS files, as we saw with the
preceding example of “The Daily Droid”. In fact, one can even go as far as invoking
media queries when using the @import rule to call a CSS file for the correct display as in
the following example:
<style type="text//css">
@import url(landscape.css) screen and (orientation:landscape);
</style>
In the following example, we will have several @import rules importing in many different
CSS files for different layout types (see Listing 5-8).
Listing 5-8
: Media Query Example 3
<style type="text//css">
<!-- Styles for a smartphone landscape display -->
@import url(landscape.css) handheld and (orientation:landscape) and (max-
width:480px);
<!-- Styles for a Honeycomb tablet landscape display -->
@import url(landscape.css) handheld and (orientation:landscape) and (max-
width:648px);
<!-- Styles for a portrait display -->
@import url(landscape.css) all and (orientation:portrait);
</style>
2
Devices that have sensors to detect movement typically will tell the software if the
phone is switched from landscape to portrait view, allowing your web page to reformat
automatically based on the styles you define.
