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!

28 thoughts on “How to use CSS3 media queries for responsive website ?”

  1. Helpful post.. Thanks for sharing…

  2. This is great! You always simplify everything as much as possible which is awesome! Wish this article was about a few months back when I was proper confused on this subject.

  3. /* ———– 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… */
    }<link rel="stylesheet" type="

  4. Wow. cool post. I’d like to write like this too – taking time and real hard work to make a great article…

  5. This is such a great resource that me are providing and you give it away for free. seeing that understand the value of providing a quality resource for free

  6. Thank you very much for a very useful guide…

  7. One, just what I’ve been looking for! Thank you!

  8. Slightly changed for myself, and everything turned out.

  9. Thanks for sharing these useful information! This is really interesting information for me.

  10. Interesting post! This is really helpful for me. I like it! Thanks for sharing!

  11. This programming language is very simple and common we can easily understand this and can help others.

  12. Thanks for your article! I have been looking for quite a long time and fortunately I read this article! I wish you would continue to have valuable articles like this or more to share with everyone!
    And please let me grow my backlink! That can only be done when you give permission!

  13. Nice article,I loved it.Thanks for sharing and keep sharing. Get a ERP software for you small business.For more details contact us.

  14. Thanks for your post! I believe there are many who feel the same satisfaction as I read this article! I hope you will continue to have such articles to share with everyone!

  15. Thanks for the sharing this great article related to The Future of the Web.. this article is very usefull for me.Thanks again for sharing this great article!

  16. I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.

  17. This is really great work. Thank you for sharing such a useful information here in the blog.

  18. Really i appreciate the effort you made to share the knowledge. This is really a great stuff for sharing. Keep it up. Thanks for sharing.

  19. Thanks for the information your article brings. I see the novelty of your writing, I will share it for everyone to read together. I look forward to reading many articles from you.

  20. I was reading your article and wondered if you had considered creating an ebook on this subject. Your writing would sell it fast. You have a lot of writing talent.

  21. I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to the whole thing. Do you have any helpful hints for newbie blog writers? I’d certainly appreciate it.

  22. Many many thanks for sharing your point of view through this article.Actually, I don’t have clear knowledge about this topic, but after go through your article, I get few good tips in this particular field.It is really what I wanted to see hope in future you will continue for sharing such an excellent post.

  23. Thanks for your post! Through your pen I found the problem up interesting! I believe there are many other people who are interested in them just like me! How long does it take to complete this article? I have read through other blogs, but they are cumbersome and confusing. I hope you continue to have such quality articles to share with everyone!

  24. Thanks for your article! I have been looking for quite a long time and fortunately I read this article! I wish you would continue to have valuable articles like this or more to share with everyone!

  25. Nice post, very informative. Thanks for sharing.

Leave a Reply to essay writing services Cancel reply