Let’s explore a few things about the most important feature of CSS styles @media rule that is defined to specify the styles to different media types for different responsive screens, print layouts, other screen devices.
Example:
[html]
<style="text/css">
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
</style>
[/html]
The “and” keyword:
Let’s say, if we want to combine multiple media features with media types, an “and” keyword is used. The below syntax for small tablet devices, will work for both portrait and landscape orientations.
[html]
@media screen and (min-width: 481px) and (max-width:767px ) { }
[/html]
One more scenario,
[html]
@media (min-width:650px) and (orientation: landscape) { }
[/html]
The above mentioned media query will only return true, if the viewport of device has 650px wide or wider and the display is in landscape.
The same scenario if we want to apply for the media type TV, just simply try with an “add” operator. Below is an example of that:
[html]
@media tv and (min-width: 650px) and (orientation: landscape) { }
[/html]
Note, this will be applicable only if the media type is TV, the viewport is 650px wide or wider, and the display is in landscape.
Recognized Media Types:
Though, there are many media types available in CSS, the most commonly used @media types are –
[html]
all
print
screen
[/html]
Media Features:
Lot of media features are there and below explained are few of them that are most commonly used and each of the feature is assigned to set one specific operation of the browser or device.
[html]
device-width
device-height
aspect-ratio
orientation
monochrome
[/html]
device-width defines the viewport width
This means, the width of the output device, the entire screen or page, rather than just the rendering area.
device-height defines the viewport height
Likewise, the above feature specifies the height of the output device, the entire screen or page, rather than just the rendering area.
aspect-ratio defines the width-to-height aspect ratio of the viewport, in simple ways, width:height
This is an interesting, admiring media feature as it helps to create better images and impacts on the image sizes. It mostly matters to the CSS specialists and also to the camera lovers.
Here, we have given the most common mobile devices with aspect ratio and normal resolution as this is a quick, short blog trip on CSS media queries.
Aspect ratio 4/3
[html]
Android devices resolution with 320X240
Ipad devices resolution with 1024X768
[/html]
Aspect ratio 3/2
[html]
Android devices resolution with 480X320
Iphone devices resolution with 960X640
[/html]
Aspect ratio 16/10
[html]
Android devices resolution with 800X480
Android tablets devices resolution with 1200X800
[/html]
Aspect ratio 16/9
[html]
Android devices resolution with 854X480
Iphone 5 devices resolution with 1136X640
[/html]
Just a simple code as an example:
[html]
@media screen and (device-aspect-ratio: 16/9) {
}
@media screen and (device-aspect-ratio: 32/18) {
}
@media screen and (device-aspect-ratio: 1280/720) {
}
@media screen and (device-aspect-ratio: 2560/1440) {
}
[/html]
Now, let’s see how to write the query to select the style when the aspect ratio is either 32:18 or 16:10.
[html]
@media screen and (device-aspect-ratio: 32/18), screen and (device-aspect-ratio: 16/10){
div#name{
color:red;
}
}
[/html]
Monochrome defines the number of bits per pixel on a monochrome (greyscale) device. If the device isn’t monochrome, then the device’s value is 0.This feature has support for web-kit browsers only.
To apply specific styles to all monochrome devices, we can use the (monochrome) value. We can also use this value to give style to devices with a certain number of bits per pixel. Let us take an example, if you want to remove images on all devices that have 8 bits per pixel, we could use this code
Example:
[html]
@media (max-monochrome: 8) {
img {
display:none;
}
}
[/html]
Orientation defines whether the viewport is in landscape or portrait mode.
The orientation of the device can be used to create custom layouts. This may be useful for positioning menus and buttons in places that are easily accessible to a user’s rotation of the devices.
Example for a Landscape orientation:
[html]
@media screen and (orientation: landscape) {
div#name {
float: left;
}
}
[/html]
Portrait Orientation:
[html]
@media screen and (orientation: portrait) {
div#name {
float: right;
}
}
[/html]
All in short, media queries are simple to use when you want to present different content to different devices.
