1

我正在尝试构建一个响应式网页设计，我几乎已经完成了。唯一的问题是导航菜单。我创建了两个版本的导航菜单——一个用于桌面，另一个用于移动。我尝试在 CSS 的桌面部分中为移动版导航执行“display:none”，但如果我这样做，菜单将不会在移动版中显示。解决此问题的解决方案是什么？您可以在此处查看该网站：http ://rachelchaikof.com/testing/

4

5 回答 5

2

你想沿着这条线添加一些CSS......

@media screen and (max-width:400px) {
#mobile-nav {
display:none;
}
}

如果屏幕尺寸小于 400 像素，这将隐藏移动导航菜单。您可能希望根据您正在测试的设备来使用最大宽度。

或者，您可以使用此 PHP 函数来检查它是否是移动用户代理，然后将移动菜单包装在 PHP if 语句中。 http://erikastokes.com/php/how-to-test-if-a-browser-is-mobile.php

于 2012-12-03T03:31:28.047 回答
1

如果你在媒体查询之外写“display:none”，它就不会出现。这是我在我的一个项目中遇到的

我使用以下方法修复了它：

        @media screen and (min-width:650px) { /*hide mobile menu for desktop*/
                .footer #exfootmenu{
                    display:none;
                }
            }       


        @media screen and (max-width:650px) {/*show mobile menu for mobile devices*/
                .footer #exfootmenu{
                    display:block;
                }
}
于 2013-07-04T13:15:13.820 回答
0

你能不能创建一个最小宽度：700px（或任何你的移动断点）的媒体查询，并且在这个媒体查询中你可以显示：none！important #mobile-nav？

于 2012-12-04T23:45:06.860 回答
0

使用带有媒体查询的 html 5 和 CSS 的样板（向后兼容性），我已经能够得到 display:none; 在莫兹工作。FireFox 但无法让它在 Safari、Chrome 中运行，甚至不会在 IE 中尝试它！您应该使用媒体查询，响应式=移动优先。您的移动导航属性应设置为 display: block; 或内联块；然后当您点击屏幕捕捉点时，将属性设置为 display:none; 这将在 Firefox 中工作。对其他人的任何建议...请告诉..

于 2013-01-19T19:05:03.490 回答
0

通常，为了获得您想要的效果，您可以在 CSS 样式表中为移动视图创建一个媒体查询，然后在该部分中，您可以nav以不同的方式为桌面视图中的相同元素设置样式。

我今天晚上只在 iPad 上查看了您的网站，所以我没有深入研究您的代码。对不起，如果这太明显了。

网站内容很棒！我有一个在芝加哥大学的朋友，他对植入物跨文化的社会方面进行了大量研究。令人惊讶的是，我们在美国听到的很少。

于 2012-12-03T02:36:24.533 回答