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

Question

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

@media only screen and (max-width : 320px) { style goes here }

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

@media only screen and (min-width : 321px) { style goes here }

这仅在我为横向插入样式时发生，当我为纵向分配样式时不会发生这种情况。

PS 我正在 iPhone 4 上进行测试。

Answer 1

您需要为横向设置最大宽度，直到宽度低于 800 像素，这才会覆盖您的桌面样式：

@media only screen and (min-width : 321px) and (max-width: 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 }

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