CSS (Cascading Style Sheets) is a programming language for styling websites. It's maintained by W3C Consortium. This language has many features, but new features are added very rarely. Usually, years or even decades of waiting are needed for new features or versions of CSS. In the world of web design where change is only constant, sometimes we miss some features. New features are often added by developers of the most popular browser engines (Webkit, Mozilla, Microsoft...), but we often don't use them because those features don't work perfectly on all browsers.
There's one old feature of CSS that we usually ignored in the past. This is @media and it's natively added to separate CSS commands regarding the media type, for example, screen or paper. Furthermore, it can be used to execute CSS commands depending on the screen size. In modern web development where the responsivity of the website is not an option, but a necessity, we started to use this old and forgotten feature intensively.
Since this feature is used in many of our responsive Joomla templates and responsive WordPress themes, we will give you some examples from our practice in order to help you to make your site responsive.
@media command is used in this way:
@media (max-width: 730px) {
/* some css here */
}
Between the curly brackets, you can add any CSS code as usual, but it will be applied only if the conditional from the @media command is satisfied. In our sample, we added the condition max-width: 730px, which means the CSS between the curly brackets will be executed only if the screen size is 730px wide, or less. We can also use min-width condition, like in this example:
@media (min-width: 490px) {
/* some css here */
}
In this case, the CSS between the curly brackets will be executed only if the screen size is 490px wide or more. Those two conditions can be combined as well, so, we can make a @media query that will execute the CSS code only if the screen size is between two values, like in this example:
@media (min-width: 490px) and (max-width: 730px) {
/* some css here */
}
As you can guess, in this example, the CSS code will be applied only if the user's screen width is between 490px and 730px. The code will not be applied if the user has a screen width of less than 490px and more than 730px.
You can see that the @media command is easy to understand and you don't have to be a CSS guru to use it for your projects. We will give you one very simple example that better illustrates development of responsive websites with @media queries. We have two DIVs that occupy 60% and 40% of the website width, which is 960px in this example. The HTML code of this simple example will be:
<div class="wrapper"> <div class="left_column">Content of the left column</div> <div class="right_column">Content of the right column</div> </div>
The CSS code for this will be:
div.wrapper { width: 960px; }
div.left_column { width: 60%; float: left; }
div.right_column { width: 60%; float: left; }
Let's use @media query now to make this simple website responsive. If a user has a screen whose width is less than 960px, he should see the left and right columns stacked one above the other and they should fill the entire space of the user's screen. You should add this in your CSS file:
@media (max-width: 960px) {
div.wrapper { width: 100%; }
div.left_column { width: 100%; float: none; }
div.right_column { width: 100%; float: none; }
}
This CSS code will be applied only if the user's screen resolution is less than 960px horizontally. It will change the wrapper and the column's DIVs to occupy the full-screen space. Also, it will change the floating, so the columns will be shown as stacked.
As you already noted, we use pixels (px) and percentages (%) as a measure of the screen width. The producers of screen panels have started to change the density of the pixels in modern monitors (retina displays), tablets, and smartphones. Now, we got screens that have impressive image quality, but, at the same time, we have more headaches as web developers. We should take care of the screen density as well as make our sites look perfect on all modern screens.
Fortunately, there are two more conditions in the @media query that can help us to handle this problem. These conditions are min-device-pixel-ratio and max-device-pixel-ratio. When the device uses a screen panel with higher density, it usually shows web pages with higher pixel ratios. This makes text both clean and big enough to be readable. This is also helpful for us to add specific CSS code for such devices, using the @media query. The values of the device pixel ratios can be 1 (for regular screens), 1.5 (for screens with higher density), or even 2 (for the highest density). This value could be increased even more in the future when newer screen panels become available. For example, iPhone 4 has a pixel density of 1.5, and if you want some CSS to be executed on iPhone 4 and all other devices with this pixel density, you can use this @media query:
@media (min-device-pixel-ratio: 1.5) {
/* some css here */
}
This will help you to add some CSS code to make your site better on screens with a pixel ratio equal to or higher than 1.5. If you wonder how you can test your site on mobile devices screen without owning the mobile device, you can use virtual machines installed on your computer.