Adaptive Design With CSS3 Media Queries - (Part 2)

Specifying Rules Based on Resolution and Device Orientation

You can also specify multiple media features in one grouping like this:
@media screen and (width: 1024px) and (height: 768px) {
CSS Rules
}
What we just did was create a Media Query that states the set of following CSS elements and attributes should only be rendered if the browser size has a 1024x768 resolution.

Some of the values that can be used here are: width, height, min-width, min-height, max-width, max-height, etc.

We can also use Media Queries to render our CSS when compared to an individual devices physical screen width or height, instead of measuring the size of the browser viewing area. The browser viewing area takes into account that the task bar and the top of the browser window is not considered viewable area, but with measuring device width or height, we are effectively measuring the entire size of the screen in all dimensions.

Ex: @media screen and (device-width: 600px) and (device-height: 400px) {
CSS Rules
}
This code could be used to measure the viewing area of a smart phone or tablet PC and render the CSS based on the full width and height of the actual screen, not the browser viewing area. LCD screens are typically measured from the top left corner to the bottom right corner. When looking at laptops on display in a computer store, you may notice virtually all specify a screen size. The screen isnt measured from left to right, or top to bottom, but instead from one top corner diagonally to a bottom corner across the screen in question. So, if you read the specs of a laptop that state that it has a resolution of 1366x768, and a screen size of 15.4 inches, they are actually stating 15.4 inches from the top left corner to the bottom right corner of the actual viewable display screen.

We can also specify our media features using the max-width, max-height, min-width, and min-height attributes as well like this:
@media screen and (device-max-width: 600px) and (device-max-height: 400px) {
CSS Rules
}

Working With Device Orientation

Many new tablet PC's and Smart phones can display their web browsing content in Landscape (horizontally) or Portrait (vertically) view. Landscape view refers to viewing the browser window horizontally, and portrait view refers to viewing the browser window vertically. Almost all current smart phones and tablet PC's can be viewed in multiple orientations, depending on how the user is viewing the screen. By turning the device, the user can view the screen in both Lanscape and Portrait modes. All new smart phones and tablets today will automatically switch from one orientation to the other just by turning the device, the problem is, the same code will still be rendered regardless of its orientation. By specifying a specific orientation you can have a separate set of CSS code that will be rendered for each specific vertical or horizontal representation of the mobile device you are coding for.
The syntax for working with device orientation is shown here:
@media screen and (orientation:value) {
CSS Rules
}
Ex: @media screen and (orientation: portrait) {
CSS Rules
}
or
@media screen and (orientation: landscape) {
CSS Rules
}
This way if a user with a tablet PC that changes its orientation automatically, as ipads do, then the orientation property makes it possible to support these devices both vertically and horizontally.

You can also mix the orientations with specific width's, height's, device-width's, device-height's, etc, like so:

@media screen and (max-width: 980px) and (orientation: landscape) {
}
or: @media screen and (min-width: 240px) and (orientation: landscape) {
}
The power of Media Queries lies in its ability to be used within a combination of multiple values that are tailored to a mobile device, etc.

Continue to Part 3 of Working With CSS Media Queries

Back to Part 1 of Working With CSS Media Queries