Question

我正在为我的网站使用以下媒体查询

        @media (max-width: 976px) {}

当我查看我的网站时，我发现了

   http://46.32.253.11/

在横向模式的ipad 3上，以纵向模式显示的导航栏按钮不起作用，我的导航栏分为2行。

我是否需要添加其他媒体查询，或者我可以编辑现有查询。如果是这样，我需要做出哪些改变。

我对媒体查询真的很陌生，所以如果有人有一个很好的资源，他们想分享这将是伟大的

Answer 1

查看这篇css-tricks文章，其中包含标准设备分辨率的引导程序：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

下面列出了landscape和portrait的特定媒体查询：

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}

我想强调的是，从“移动优先”方法来看，您不应该为设备进行设计，而应该为适合您设计的分辨率断点设计。尝试以非常小的分辨率开始，例如320 x 480.从那里，增加浏览器宽度，直到该设计“中断”（即看起来像垃圾），然后在该分辨率下添加断点。检查浏览器宽度的一种方便方法是在Chrome（或Firebug for Firefox）中打开您的开发人员控制台，然后输入document.body.offsetWidth并按Enter键。这将显示浏览器宽度的像素数量。继续添加/重新排列内容，直到您在各种设备上获得所需的体验。

网络向前发展。这意味着我们必须考虑智能手机一直到电视和投影仪。考虑到这一点设计您的网站。

我希望这会有所帮助。

CSS媒体查询无法在ipad上工作（Bootstrap）

1 个答案: