CODEWITHSUNDEEP
htmlcssmedia-queries
Sowmya
Sowmya

Reputation: 26989

media query in css

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?

Upvotes: 1

Views: 1434

Answers (3)

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 2

sandeep
sandeep

Reputation: 92853

Write like this:

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

}

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

Upvotes: 0

Luca
Luca

Reputation: 9745

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

Upvotes: 2

Related Questions