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

Question

网站 build 中: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
}