html - 移动媒体查询搞砸桌面版

Question

网站进行中：http ://www.modernfuture.net/wordpress

在我的 CSS 中，我使用以下行为我的 android 设备（480px）设计了横向模式：

@media only screen and (max-width:480px)

如果在桌面上查看该网站，这非常有效，但它不适用于我的 android Galaxy S3。

但是，如果我将该行代码更改为

@media only screen and (min-width:480px)

看起来我想要在我的 android 设备上使用（右侧的小空白区域除外），但似乎媒体查询的样式已应用于我的桌面版本。

似乎媒体查询无法正常工作，因为定义横向模式的 CSS 不仅适用于我的 android 设备 - 它要么适用于桌面版本和 android 横向版本，要么都不适用。我是否必须为桌面宽度设置单独的媒体查询？还是更简单的东西？

提前致谢！

Answer 1

要定位 S3，您需要与问题中的像素大小不同

 @media only screen and (max-device-width: 720px) and (orientation:portrait) {
  // your css
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
  // your css
}