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

Question

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

iphonecssstylesheetmedia-querieslandscape

5

我正在开发一个适用于智能手机的网站，并且在处理智能手机横向方向的媒体查询时遇到了一点问题。对于竖向方向，我使用了以下媒体查询，效果非常好：

@media only screen and (max-width : 320px) { 样式在这里 }

但是，当我将此媒体查询用于横向方向时（从css-tricks.com中获取），我编写的横向方向的样式会覆盖我在桌面版网站上设置的样式。

@media only screen and (min-width : 321px) { 样式在这里 }

只有在我为横向方向分配样式时才会发生这种情况，当我为竖向方向分配样式时不会出现这种情况。

P.S 我在 iPhone 4 上进行测试。

- Fahad Hasan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nirazul · Accepted Answer

您需要为横向方向设置一个最大宽度，这不会覆盖您的桌面样式，直到宽度低于800px为止：

@media only screen and (min-width : 321px) and (max-width: 800px) { 在这里添加样式 }

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

/* 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 }

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