In order to set different styles for each resolution, you can use the CSS3 media queries.
Media queries can be defined directly in the CSS or into an external CSS file. We will discuss the first method, that is, inserting the code inside our style.css located into skin/css.
The following code snippet is an example of a media query, also known as breakpoint:
@media screen and (max-width: 980px)
div {
width: 95%;
}
}In this example, all the div elements will have a width of 95% for all the resolutions under 980 pixels, defined by the CSS property max-width. This is a very simple example, but keep in mind that you can play with media queries to have a different design for each resolution and customize your theme as you want.
As we said before, we have four main scenarios; for each of them, we can use a media query, and write inside them the code that we need to customize the theme.
Now, let's discuss the main media queries that we are going to use into the theme for the most used devices' resolutions:
- Large devices
- Medium or standard devices
- Tablet devices
- Smartphone devices
The width of 1170 px is the default width that Bootstrap assigns to the div container. So, we don't need a media query for this resolution. This resolution is used for large devices such as desktop computers and large laptops, as shown in the following figure:
If you take a look at Bootstrap CSS, you can see that the container has the width set with the following media query:
@media only screen and (min-width: 1200px) {
/* styles for browsers larger than 1200px */
.container {
width: 1170px;
}
}This is the resolution for small laptops and medium screens (or browser windows) with a maximum width of 1200 px. This is the most used resolution and it is shown in the following figure:
If the viewport is narrower than 992px, we can make all the changes to the CSS for small desktops with the following media query that Bootstrap uses to set the container width:
@media only screen and (max-width: 992px) {
/* styles for browsers smaller than 992px; */
.container {
width: 970px;
}
}A tabled viewport is a little smaller than the desktop and it sometimes needs advanced optimization. To make the theme compatible with the most used tablet viewports, we can use a container width of 750 px as shown in the following figure:
If the viewport is narrower than 768px, we can make all the changes to the CSS for tablets with the following media query that Bootstrap uses to set the container width:
@media only screen and (max-width: 768px) {
/* styles for browsers smaller than 768px */
.container {
width: 750px;
}
}For smartphones, we will not use a fixed width. For a viewport, the layout will remain fluid for a maximum width of 320 px, to allow all smartphone resolutions to adapt correctly as shown in the following figure:
You can insert your custom styles for small devices with the following media query:
@media only screen and (max-width: 320px) {
/* styles for browsers smaller than 320px */
.container {
width: 300px;
}
}