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 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