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

cnon 发布于 2019-03-09 css 最后更新 2019-03-09 14:32 0 浏览

我正在开发智能手机友好版本的网站,并且在处理针对智能手机横向方向的媒体查询时面临一些小问题。对于纵向方向,我正在使用以下媒体查询,它工作得很好:

@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上进行测试。
已邀请:

noptio

赞同来自:

您需要为横向设置最大宽度,在宽度低于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 }
请注意,横向样式将用于桌面版本。有时这是一种受欢迎的行为。