CODEWITHSUNDEEP
htmlcssmedia-queries
Gaurav Manral
Gaurav Manral

Reputation: 600

correct way of giving @media min-width or max-width

I am trying to figure out if there should be an order (Increasing or decreasing) while giving @media in the css.

I am using some media with min-width, then if i write it in following order then what difference does it make with if i place it in increasing or decreasing order.

@media only screen and (min-width: 1000px) {

}
@media only screen and (min-width: 1365px) {

}
@media only screen and (min-width: 1280px) {

}

@media only screen and (min-width: 900px) {

}
@media only screen and (min-width: 1150px) {

}

Upvotes: 1

Views: 261

Answers (1)

user3790264
user3790264

Reputation:

If you are using min-width, then start with the minimum. because if browser gets two css condition suitable, it picks the later one. for example in following case-

@media only screen and (min-width: 1280px) {

}

@media only screen and (min-width: 900px) {

}

now if browser width is more than 1280, both condition are suitable for it. in this case it will pick second condition, i.e. (min-width: 900px). while it must choose (min-width: 1280px).

So always keep its order in mind.

Also same apply for the max-width condition. also give css condition with max-width in decreasing order. so you got the following -

for min-width

@media only screen and (min-width: 900px) {

}
@media only screen and (min-width: 1150px) {

}
@media only screen and (min-width: 1280px) {

}

for max-width

@media only screen and (max-width: 1280px) {

}
@media only screen and (max-width: 1150px) {

}
@media only screen and (max-width: 900px) {

}

Upvotes: 3

Related Questions