How to use media queries in css

css

Solution

.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 */ }
}

Problem

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 different style comes, if screen width 481 to 600 then different style comes, if screen width 601 to 800 then different style comes, if screen width 801 then default CSS should work.

Original source