Question

我正在我的Galaxy S3（1280x720像素）上测试我的单页网站，我似乎无法弄清楚最大宽度的内容。我查了一下，找不到当前的答案 - 最明确的答案来自“视网膜前”。（或者他们还应该工作......？）

由于像素设备变化如此之快，有没有办法只通过设备的orientatino来定位媒体查询？

Answer 1

媒体查询还具有“方向”功能，您可以在查询中使用该功能来检测纵向或横向模式。您的情况的正确媒体查询将是：

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
/* insert styles here */
}

作为旁注，如果您需要找出其他有效的媒体查询，我制作了一个方便的媒体查询构建工具，其中包含可选的设备预设（我在这里使用的预设被列为“Galaxy Nexus，landscape”）：{{ 3}}

Answer 2

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
 and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

还有更多，请查看http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如何在不使用max-width的情况下查询视网膜手机的风景？

2 个答案: