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

Question

我正在开发智能手机友好版本的网站，并且在处理智能手机横向导航媒体查询时面临一个小问题。对于纵向，我使用下面的媒体查询，它的工作完美的罚款：

@media只有屏幕和（最大宽度：320像素）{风格到这里}

但是当我我正在使用这个媒体查询的横向（取自css-tricks.com），我为横向写作的样式覆盖了我为我的网站的桌面版本放置的样式。

@media只有屏幕和（最小宽度：321px）{风格到这里}

这只是发生的事情时，我将风格的横向，这种情况不会发生在我为纵向定位样式。

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 } 

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