Media queries are CSS3 modules which allow content to adapt to various screen resolutions, such as smartphones, tablets, and high definition screens.
To deliver different styles to different devices, media queries are an excellent way to achieve this, providing the best experience for each type of user. As a part of the CSS3 specification, media queries expand the role of the media attribute that controls how the styles are applied.
A media query comprises of one or more expressions and type of media involving features that result in true or false. Moreover, relevant style sheet or style rules are applied, following the regular cascading rules when a media query is true.
The following snippet is a very simple example which applies when the device width is greater than 500 px:
@media screen and (min-width: 500px)
{
/* some css here */
}The device on which the linked document (external CSS) will be applied is specified by the media attribute's value. Using the media attribute inside a <link> element, a media type can be declared in the head of an HTML document. Within XML processing instructions, media types can be declared and the @import at-rule and the @media at-rule can be used.
Other media types defined by CSS2 are:
projection: This is used for projected presentations such as slidesembossed: This is used for braille printersall: This is used for all media type devicesaural: This is used for sound and speech synthesizerstv: This is used for television type devicesscreen: This is used for computer screensbraille: This is used for braille tactile feedback deviceshandheld: This is used for handheld or small devicesprint: This is used for printerstty: This is used for media using a fixed-pitch character grid, such as teletypes and terminals
An important feature of style sheets is that they specify how a document is to be presented on different media, such as on paper, on the screen with a speech synthesizer, or on a braille device.
We can apply different styles to a page view depending on which medium it is being used. With the help of a media attribute, internal and external style sheets can be associated with a media type.
These are the queries written within the HTML page inside the <style> tag.
Pros of internal media query are as follows:
- There is no need of extra HTTP requests
- This remains visible and not forgotten when updating the old one
Cons of internal media query are as follows:
- There is an increase in the file size in case user needs to download
- To make it work with older versions of the Internet Explorer browser, we have to use JavaScript
The syntax for the internal media query is as follows:
body{
background: blue;
}
@media screen and (max-width: 480px){
body{
background: black;
}
}Initially, it sets the background color to blue. But up to a maximum width of 480 pixels, it sets the background color to black that is overriding of CSS style.
These are the queries written and maintained in the separated file or in the external CSS file.
Pros of external media query are as follows:
- This is easy to keep and maintain CSS when extensively used
- Using conditional comments, we can use external media query with old versions of Internet Explorer
- For non-supporting browsers, the file size is smaller
Cons of external media query are as follows:
- An extra HTTP request is needed to apply it
- This can be easily forgotten in case of updating the old one
Extend the existing media part of the link element or the @import rule:
<link href="example.css" rel="stylesheet" media="only screen and (max-width:480px)"> @import url(example.css) only screen and (max-width:480px);
Media features resemble CSS properties syntactically as they have names and accept certain values, or we can say that they are the conditions with which we can customize our responsive design.
Some media features are listed in the following table:
In this particular section, we will focus on the syntax for setting a minimum or maximum width of general and device-specific screen resolutions. We will also discuss the orientation of the device.
We cannot set the browser's screen resolution with CSS.
We can use the following code for small screen devices with a maximum device width of 480 px:
@media screen and (max-device-width: 480px)
{
/* some CSS here */
}Any CSS written inside the media query will be applied to devices with a width of 480 px or less. The purpose of using max-device-width instead of device-width is that device-width refers to the width of the device but does not refer to the width of the display area. In case of browsers where we can change the resolution can be changed if the user resizes it, so we used max-device-width.
Until and unless, the screen resolution or browser size (in cases where we can change the browser size) is 480 px or less, the media query does not take effect, which basically leaves us for mobile devices.
Apple introduced devices, such as the iPhone 5 and iPad 3. In their earlier devices, such as the iPhone 4 and 4S, they had introduced an idea of retina display. In retina display, the screen resolution of the device gets doubled. Apple supports a proprietary property called -webkit-device-pixel-ratio that returns the pixel density of the device. So, this device returns a value of 2.
We can use the following code for general Apple devices with a high resolution:
@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
/* some css here */
}We can use the following code for small screen with high resolution devices, such as the iPhone 4:
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px)
{
/* some css here */
}We can use the following code for large screen with high resolution devices, such as the iPad 3:
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px)
{
/* some css here */
}Because of high resolution, images are the most popular choice which can be optimized for retina displays as depending on the device; we can serve two different versions of an image. For retina displays, we double the size and resolution of the original image but when we use this image, we apply a constraint to its dimensions to be the same as the original one and allow retina devices to show two pixels for every pixel shown as a result we get a super clear image.
The following code is an example for a background image:
normal background for the browsers:
div#featuredbox{
width: 80%;
height: 350px;
background: url(normal_background.jpg) center no-repeat;
}
retina devices with larger screens:
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px){
div#featuredbox{
-webkit-background-size: 50% auto;
background: url(highresolution_background.jpg) center no-repeat;
}
}In the preceding example, -webkit-background-size: 50% auto; shrinks the image by 50 percent of its actual dimensions, which matches that of the original image. background: url(highresolution_background.jpg) center no-repeat; is the high resolution image which doubles the size or resolution of the original image.
Apart from dealing with screen sizes, tackling the orientation of a device before media queries was hectic, but the introduction of media queries has eased the life of developers:
@media screen and (orientation: portrait)
{
/* some CSS here */
}The preceding code will target all devices whose screen height is longer than its width. Going further in situations where the user might be using a small screen device where orientation matters.
We can use the following code for screens with a maximum width of 480 px resolution for portrait mode:
@media screen and (max-device-width: 480px)and (orientation: portrait)
{
/* some CSS here */
}We can use the following code for screens with a maximum width of 640 px resolution for landscape mode:
@media screen and (max-device-width: 640px) and (orientation: landscape)
{
/* some CSS here */
}Of the technical pillars of responsive web design, media queries are the best established and supported. Additionally, they offer a solid return on investment from a design perspective and can be applied to existing applications to great effect.