Joomla Templates, WordPress Themes - HotThemes

CSS3 Media Query for Responsive Websites

CSS (Cascading Style Sheets) is programming language for styling websites. It's mainained by W3C Consortium. This language has many features, but new features are added very rarely. Usually, the years or even decades of waiting are needed for new features or versions of CSS. In the world of web design where the change is only constant, sometimes we really 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 doesn'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 of the media type, in example, screen or paper. Furthermore, it can be used to execute CSS commands depending of the screen size. In the modern web development where responsivity of the website is not an option, but necessity, we started to use this old and forgotten feature intensively.

Since this feature is used in many of our 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 usually, but it will be applied only if the conditional from the @media command is satisfied. In our sample, we added condition max-width: 730px, which means the CSS between the curly brackets will be executed only if 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 screen size is 490px wide or more. Those two conditions can be combined as well, so, we can make @media query that will execute the CSS code only if 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 user's screen width is between 490px and 730px. The code will not be applied if the user have screen width less than 490px and more than 730px.

You can see that @media command is easy to understand and you don't have to be a CSS guru to use it for your own projects. We will give you one very simple example that better illustrate 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 user has screen which width is less than 960px, he should see the left and right column 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 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 percents (%) as a measure of the screen width. The producers of screen panels has started to change the density of the pixels in the modern monitors (retina displays), tablets and smartphones. Now, we got screens which has the impressive image quality, but, at the same time, we have more headache as web developers. We should take care about the screen density as well to make our sites looking perfectly on all modern screens.

Fortunatelly, there's two more conditions in @media query that can help us to handle this problem. These conditions are min-device-pixel-ratio and max-device-pixel-ratio. When device uses a screen panel with higher density, it usually shows the 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 @media query. 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 future, when newer screen panels become available. In example, iPhone 4 has 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 in screens with pixel ratio equal 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.