我正在开发一个适用于智能手机的网站版本,在处理智能手机横向方向的媒体查询时遇到了一个小问题。对于纵向,我正在使用以下媒体查询并且它工作得很好:
@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 上进行测试。
最佳答案
您需要为您的横向设置一个最大宽度,这不会覆盖您的桌面样式,直到宽度低于 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 }
请注意,横向样式将用于桌面版本。有时这是一种受欢迎的行为。
关于iphone - 智能手机的媒体查询(横向),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15953361/