Iphone 智能手机媒体查询（横向）

我正在开发一个对智能手机友好的网站版本，在处理智能手机横向定位的媒体查询时，我遇到了一个小问题。对于纵向，我使用以下媒体查询，它工作得非常好：

@仅媒体屏幕和（最大宽度：320px）{style goes here}

但是当我使用这个横向媒体查询（取自css tricks.com）时，我为横向编写的样式会覆盖我为我的网站的桌面版本输入的样式

@仅媒体屏幕和（最小宽度：321px）{style goes here}

这仅在为横向方向插入样式时发生，而在为纵向方向指定样式时不会发生

---

另外，我正在iPhone 4上进行测试。

您需要为横向设置最大宽度，在宽度低于800px之前，这不会覆盖您的桌面样式：

@仅媒体屏幕和（最小宽度：321px）和（最大宽度：800px）{style goes here}

另一种可能是将桌面样式包装到另一个查询中，并将其复制到纵向和横向样式下：

/* PORTRAIT STYLES */
@media only screen and (max-width : 320px) { style goes here }
/* LANDSCAPE STYLES */
@media only screen and (min-width : 321px) { style goes here }
/* DESKTOP STYLES */
@media only screen and (min-width : 800px) { style goes here }

---

请注意，横向样式将用于桌面版本。有时候，这是一种受欢迎的行为。

太好了，现在起作用了！谢谢！我还使用了平板电脑的媒体查询（仅纵向），因此我将上面列出的媒体查询编辑为：@media only screen and（最小宽度：321px）和（最大宽度：480px）{style goes here}这就是我对平板电脑的媒体查询：@media only screen and（最小设备宽度：481px）和（最大设备宽度：1024px）和（定位：肖像）{我希望这不是一个错误的做法？