How to use media queries in css

Question

I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand

my queries requirement is

if screen width is 100 to 480 then d

Answer 1

The basic relies on using this kind of queries:

@media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make 
your site pretty on this range.*/
}

Please remember that when using responsive web design you should use percentages when possible also em for fonts.

media queries are now available for IE. take a look in http://caniuse.com/#feat=css-mediaqueries when you can use them. A polyfil I been using with good results is response.js

Answer 2

.class { /* default style */ }

@media (min-width: 100px) and (max-width: 480px) {
 .class { /* style */ }
}

@media (min-width: 481px) and (max-width: 600px) {
 .class { /* style */ }
}

@media (min-width: 601px) and (max-width: 800px) {
 .class { /* style */ }
}

Answer 3

I believe something along the lines of:

@media screen and (min-width: 100px) and (max-width: 480px)
{
    /* Change main container '.wrapper' */
    .wrapper
    {
        width: 100px;
    }
}

@media screen and (min-width: 480px) and (max-width: 600px)
{
    .wrapper
    {
        width: 480px;
    }
}

..etc