use-of-media-queries-css

Properly use of CSS Media Queries

Responsive design has become an important part of each website that claims to be the perfect fit. People in 21st century use more hand-held devices than computers which makes a huge impact on the whole concept of the web design.

The methods to make a webpage looking good on all size devices may vary depending on the project identity. For more complex websites, it is preferable to use a separate mobile version, that will load faster, will be easier to use on a small devices and will enhance customer’s experience. That is one of the options. The most used these days on various projects is the concept of the responsive design, using media queries.

Properly use of CSS Media Queries – how to make them work good for each project

What is a media query?

A media query is a way to control the presentation of content on various screen widths. It consists of a media type and expressions that set certain rules based on if conditions. The supported media features are media and print. Media stands behind all devices and print, as you might assume, is used to control the display on print pages. The supported media features are width, height and color. Most used is “width”.

Media queries can be defined from a separate css file or in the main file used to control content display. I commonly use the following method: defining media conditions into a responsive.css file.

<link rel="stylesheet" type="text/css" media="all" href="responsive.css">

!Note: the path to the file might be different for you.

There are more ways to include a css file, but we won’t stop on them right now.

Let’s go to the point how to use different css media conditions to fit perfectly a webpage on different screens.

First of all you have to make sure that your main content wrapper is set with width 100%. This ensures that the content will be resized to fit all screen widths fully. Then you have to decide the approach for the key media resolutions. I commonly use the following:

Ipad, bigger tablets:

@media (min-device-width : 768px) and (max-device-width : 1024px){

}
Tablets and bigger phones: 

@media only screen and (max-width : 850px) {

}
Smaller devices, resolution below 650px

@media only screen and (max-width : 650px) {

}
@media only screen and (max-width : 480px) {

}

Media queries widths below 320px are commonly not used as more of the modern phones have bigger screen than these values.

So basically what the following codes above represent:

1.. You can style your content to fit perfectly on iPad or any other tablet/phone with this resolution.

Properly use of CSS Media Queries

2.. 850px is a good breakpoint for various smartphones (landscape usually)

Properly use of CSS Media Queries

Media screen width 850 px

3.. 650px is a good fit for landscape view of mobiles (for example iPhone)

Properly use of CSS Media Queries

Media screen width 650 px

4.. 450 px is used for smaller screens in portrait view

Properly use of CSS Media Queries

Mobile preview

These are the very basics of the simple use of css media queries. In future tutorials we will go into more details and fancy usages.