media query in css

Question

How do I write media query only for 1024px width?

Here is my existing css which i have written for 320px width and more

@media (min-width: 320px) {

} 

What is the method for only 1024px width?

Answer 1

I think if you just want 1024, not 1023 or less, or 1025 or more, you could do

@media (width: 1024px) {
    ....
 }

The min/max prefixes are optional. See the w3 entry on it.

Answer 2

I believe you want this:

@media (min-width: 320px) and (max-width: 1023px) {
    /* styles for width > 320px but < 1023px */
}


@media (min-width: 1024px) {
 /* styles for width > 1024px only */
}

this way you do not have to override any styles.

otherwise you can do that:

@media (min-width: 320px) {
    /* styles for width > 320px - applied to width > 1024px too */
}


@media (min-width: 1024px) {
 /* styles for width > 1024px only */
}

that is different in the way that you will have to override your first media query styles when needeed, in the second one

Answer 3

Write like this:

@media (max-width:1024px) {
 body{..}

} 

Check this http://jsfiddle.net/YhsSK/