Another important element in building a responsive design is the Media Query rules , which allow you to determine the style depending on the size of the user’s browser.
For example, some elements may CSS2 already had a solution in the form of a rule media that allows you to specify the device for which a given style is used:
<html> <head> <title>Adaptive Web Page</title> <link media="handheld" rel="stylesheet" href="mobile.css"> <link media="screen" rel="stylesheet" href="desktop.css"> </head> <body> </body> </html>
The rule media=”handheld” specifies that the styles in mobile.css will be applied to mobile devices, while the rule media=”screen” applies to desktop browsers.
However, many modern mobile browsers assume that the page is intended for desktops by default, so it applies the media=”screen”. Therefore, such a decision should not be relied upon.
To solve this problem, CSS3 introduced the CSS3 Media Query mechanism . For example, to apply a style only to mobile devices, we could write this:
<html> <head> <title>Adaptive Web Page</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="desctop.css" /> <link rel="stylesheet" type="text/css" media="(max-device-width:480px)" href="mobile.css" /> </head> <body> </body> </html>
The value of the media attribute (max-device-width:480px)tells us that the styles from the mobile.css file will be applied to those devices whose maximum screen width is 480 pixels – that is, in fact, these are mobile devices.
You can combine conditions with the and keyword , for example:
<link rel="stylesheet" type="text/css" media="(min-width:481px) and (max-width:768px)" href="mobile.css" />
This style will be applied if the browser width is between 481 and 768 pixels.
Using the @import directive, you can define one css file and import styles for specific devices into it:
@import url(desctop.css); @import url(tablet.css) (min-device-width:481px) and (max-device-width:768); @import url(mobile.css) (max-device-width:480px);
You can also not separate the styles into files, but use the CSS3 Media Query rules in a single css file:
body {
background-color: red;
}
/*Further styles*/
@media (max-device-width:480px){
body {
background-color: blue;
}
/*Further styles*/
}
Applied functions in CSS3 Media Query:
- aspect-ratio : ratio of width to height of the display area (browser)
- device-aspect-ratio : ratio of device screen width to height
- max-width/min-width and max-height/min-height : maximum and minimum width and height of the display area (browser)
- max-device-width/min-device-width and max-device-height/min-device-height : the maximum and minimum width and height of the mobile device screen
orientation : orientation (portrait or landscape)
For example, we can set different styles for different mobile device orientations:
/*Styles for portrait orientation*/
@media only screen and (orientation: portrait){
}
/*Landscape styles*/
@media only screen and (orientation: landscape){
}
Thus, we only change the definition of styles depending on the device, and the css styles themselves essentially remain the same as we use to create regular sites.
As a general rule, when defining styles, styles for the smallest screens are preferred – the so-called Mobile First approach , although this is not necessary. For example, let’s define the following web page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive web page</title>
<style>
body {
background-color: red;
}
@media (min-width: 481px) and (max-width:768px) {
body {
background-color: green;
}
}
@media(min-width:769px) {
body {
background-color: blue
}
}
</style>
</head>
<body>
<h2>Responsive Web Page</h2>
</body>
</html>
First, there are general styles that are relevant primarily for mobile devices with small screens. Then come styles for devices with screens of medium width: phablets, tablets. And then there are styles for desktops.