我有两个设备,我正在测试网站设计.三星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; }
}
而且,我知道你不是真的应该如此具体,在做响应式设计时针对个别设备,但是我主要做这个测试,需要在这种情况下做.任何帮助将不胜感激.
解决方法
我有一个Nexus 7,我已经尝试了你的辛苦.问题是每个浏览器都有不同的视口.所以有一个正确的结果是复杂的.
@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";
}
}
我没有时间做歌剧.
您可以使用Nexus 7查看the result here
