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

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

您需要为横向设置最大宽度,这不会覆盖您的桌面样式,直到宽度低于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 }

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