Media query settings

Question

I created a media query for phones

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

but i need this query for desktop

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

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

My question is: How i separate 480px css settings, and 750px css settings to be different

Answer 1

method A:

write larger width queries before smaller so they can overwrite them

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

method B:

define min-width as well:

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

NOTE:i think that you dont need both max-device-width and max-width