How to use CSS3 media queries for responsive website ?

Responsive website is a todays demand and every developer should learn about how the responsive website will create and how to use css3 media queries. Before start we have to understand about how the media query works. Media query is a css3 module that allow website to rendered properly in screen resolutions. If your are applying condition in media query then the css will work when the condition is true. Lets talk about some method which we can use for creating responsive website. Media query helps to use different styles for different resolutions. There are two very easy way to use media queries for responsive website. You can use media query within stylesheet or you can create external files for different resolutions. Lets start with the first method where we can use media queries within stylesheet.

In this method you can create and manage your css within one stylesheet. Create css file by using your code editor and add some media queries for screen resolutions like mobile portrait and landscape or tab. you can use media query add some condition like this @media only screen (max-width:479px). Please see the below media queries for standard resolutions.

 /* ----------- Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{
    /* Your css goes here... */
}

/* ----------- Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) 
{
    /* Your css goes here... */
}

/* ----------- Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{
    /* Your css goes here... */
}

/* ----------- iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
    /* Your css goes here... */
}

/* ----------- iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
    /* Your css goes here... */
}

/* ----------- iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
    /* Your css goes here... */
}

/* ----------- Desktops and laptops ----------- */
@media only screen and (min-width : 1224px)
{
    /* Your css goes here... */
}

/* ----------- Large screens ----------- */
@media only screen and (min-width : 1824px)
{
    /* Your css goes here... */
}

/* ----------- iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
    /* Your css goes here... */
}

You can use this queries within one stylesheet but there is lots of developers gets confuse to manage all the css of media queries form one stylesheet for this i have another method to use this queries by using separate stylesheets for separate resolutions. Firstly you have to create css files then link that files within the head tag in Html file and for applying condition you have to use media attribute in link tag. Here you can see how the media queries apply in external css files.

<link rel="stylesheet" type="text/css" href="computer.css" media="screen and (min-width:1000px)" /></div>

Above is the example of only one resolution but you can create many. By using this resolutions you can create a nice responsive website which is compatible for all devices. When you will create responsive website do not put any css in style.css which might be changable in any some resolution you can put it on separate file. In the style.css you can only add that css which will be same in any resolutions because browser renders the style.css file as default.

So if you use this queries and methods on proper way you will easily create an nice looking responsive sites. Hope this article will helpful to you and in if you have any question or suggestion about this article you can please comment below or Contact Us anytime.

Good Luck!