media query trying to target device-width based devices

media query trying to target device-width based devices

I'm running into some issues here. I need to make some small adjustments
with my layouts based on different device widths, but I'm running into
some issues. Here's my media query syntax:
@media only screen and (max-device-width: 960px) and
(-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) {
some style
}
@media only screen and (max-device-width: 960px) and
(-webkit-min-device-pixel-ratio: 2.0) and (orientation: landscape) {
some style
}
@media only screen and (max-device-width: 650px) and
(-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) {
some style
}
@media only screen and (max-device-width: 650px) and
(-webkit-min-device-pixel-ratio: 2.0) and (orientation: landscape) {
some style
}
(This is all at the bottom of my regular css code, so it's not getting
overridden by that)
When I do it this way, the two on bottom always override the two on top!
I've tried adding (min-device-width) to the media query but it doesn't
seem to work.. Any idea what I'm doing wrong? In this instance I'm
targetting the Nexus 4 (230dpi, 768x1280res) and the Nexus 7 (323dpi,
1200x1920res).
Thanks!