css – 如何使用媒体查询来定位Galaxy Nexus和Nexus 7？

我有两个设备,我正在测试网站设计.三星Galaxy Nexus和华硕Nexus 7平板电脑.我真的很难想出如何使用媒体查询来定位这些个别设备.我不知道要用于最大宽度或使用max-device-width的值.另外我无法弄清楚什么顺序把媒体查询放在…

根据：http://responsejs.com/labs/dimensions/

> Galaxy Nexus PorTrait：document.documentElement.clientWidth = 360
Galaxy Nexus Landscape：document.documentElement.clientWidth = 598
> Nexus 7纵向：document.documentElement.clientWidth = 603
> Nexus 7 Landscape：document.documentElement.clientWidth = 966

我需要定位如下：

Galaxy Nexus肖像和平板电脑
Galaxy Nexus肖像
Galaxy Nexus平板电脑
> Nexus 7人像和平板电脑
> Nexus 7纵向
> Nexus 7平板电脑

我尝试了以下测试,但没有很好的结果…不知道我做错了什么.我只是玩弄数字,试图找出什么工作,什么没有…

/* Galaxy Nexus (porTrait and landscapE) ----------- */
@media only screen and (min-device-width : 360pX) and (max-device-width : 598pX) {
    ul.top-menu { BACkground: red; }
}

/* Galaxy Nexus (landscapE) ----------- */
@media only screen and (min-width : 361pX) and (orientation: landscapE){
    ul.top-menu { BACkground: blue; }
}

/* Galaxy Nexus (porTrait) ----------- */
@media only screen and (max-width : 360pX) and (orientation: porTrait) {
    ul.top-menu { BACkground: purple; }
}

/* Nexus 7 (porTrait and landscapE) ----------- */
@media only screen and (min-device-width : 603pX) and (max-device-width : 966pX) {
    ul.top-menu { BACkground: yellow; }
}

/* Nexus 7 (landscapE) ----------- */
@media only screen and (min-width : 604pX) and (orientation: landscapE) {
    ul.top-menu { BACkground: green; }
}

/* Nexus 7 (porTrait) ----------- */
@media only screen and (max-width : 603pX) and (orientation: porTrait) {
    ul.top-menu { BACkground: orange; }
}

而且,我知道你不是真的应该如此具体,在做响应式设计时针对个别设备,但是我主要做这个测试,需要在这种情况下做.任何帮助将不胜感激.

@media only screen and (device-width : 800pX) and (orientation: porTrait) {
    #device:after {
        content: "Nexus 7 - porTrait - firefox";
    }
}
@media only screen and (width : 603pX) and (orientation: porTrait) {
    #device:after {
        content: "Nexus 7 - porTrait - chrome";
    }
}
@media only screen and (device-width : 1280pX) and (orientation: landscapE) {
    #device:after {
        content: "Nexus 7 - landscape - firefox";
    }
}
@media only screen and (width : 966pX) and (orientation: landscapE) {
    #device:after {
        content: "Nexus 7 - landscape - chrome";
    }
}