html - Media query settings -

i created media query phones

@media screen , (max-device-width: 480px), screen , (max-width: 480px)  {  ...css here... body {width:50%;} 

but need query desktop

@media screen , (max-device-width: 750px), screen , (max-width: 750px)   

if add @media desktop query .body {width:100%;} settings changed in 480px also.

my question is: how separate 480px css settings, , 750px css settings different

method a:

write larger width queries before smaller can overwrite them

@media screen , (max-width: 750px){   body{     width:100%;   } } @media screen , (max-width: 480px){   body{     width:50%;   } } 

method b:

define min-width well:

@media screen , (max-width: 750px) , (min-width: 481px){   body{     width:100%;   } } @media screen , (max-width: 480px){   body{     width:50%;   } } 

note:i think dont need both max-device-width , max-width