CODEWITHSUNDEEP
css
Jitender
Jitender

Reputation: 7971

How to use media queries in css

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.

Upvotes: 3

Views: 352

Answers (3)

omniwired
omniwired

Reputation: 58

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

Upvotes: 2

madeye
madeye

Reputation: 1406

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

Upvotes: 6

Marty
Marty

Reputation: 39456

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

Upvotes: 1

Related Questions