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
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