智能手机的媒体查询(横向)

Question

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

@media only screen and (max-width: 320px) {style移到这里}

但是当我使用这个媒体查询横向方向时(取自css-tricks.com)，我为横向方向编写的样式覆盖了我为我的网站的桌面版本设置的样式。

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

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

p。S:我正在iPhone 4上做测试。

Answer 1

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

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

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