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 }

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

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

Answer 1

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

@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 }

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