html - @media screen best practice for my dimensions -

i new @media screen please gentile.

i not have fluid setup rather fixed setup 3 different device setups.

mobile = max-width 500px. tablet = max-width 740px. laptop/desktop/desktop hd = width 980px.

so correct saying following:

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

you need have smallest screen-width last, this:

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

as css reads top bottom, max-width: 740px overlap, 320px still less 740px.

you set min-width:

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

then can place them want.

edit:

this better:

[ css 741px , above here ]  @media (max-width: 740px) { } @media (max-width: 500px) { }

this way, need fix widths, font-sizes , such in media-queries, , don't need write background-colors , font-colors if should stay same.

ITEMscalal