CODEWITHSUNDEEP
htmlcss
MrJamesBond
MrJamesBond

Reputation: 417

@media screen best practice for my dimensions

I am new to @media screen so please be gentile.

I do not have a fluid setup but rather a fixed setup for 3 different device setups.

Mobile = max-width 500px.
Tablet = max-width 740px.
Laptop/desktop/desktop hd = width 980px.

--

So am I correct is saying the following:

@media (max-width: 500px) { }
@media (max-width: 740px) { }
@media (min-width: 741px) { }

Upvotes: 0

Views: 140

Answers (1)

razemauze
razemauze

Reputation: 2676

You need to have the smallest screen-width last, like this:

@media (min-width: 741px) { }
@media (max-width: 740px) { }
@media (max-width: 500px) { }

As the CSS reads from the top to the bottom, then with your max-width: 740px will overlap, as 320px is still less than 740px.

You could also set a min-width:

@media (max-width: 500px) { }
@media (min-width:501px) and (max-width: 740px) { }    
@media (min-width: 741px) { }

Then you can place them as you want.

EDIT:

This is actually better:

[ CSS For 741px and above here ]

@media (max-width: 740px) { }
@media (max-width: 500px) { }

This way, you just need to fix widths, font-sizes and such in the media-queries, and you don't need to write background-colors and font-colors if they should stay the same.

Upvotes: 1

Related Questions