Question

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

Answer 1

您希望在此行中添加一些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

Answer 2

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

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

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

Answer 3

你能不能创建一个最小宽度为700px的媒体查询（或者你的移动断点是什么），在这个媒体查询中你可以显示：none！important＃mobile-nav？

Answer 4

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

Answer 5

如果您在媒体查询之外编写“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;
                }
}

响应式Web设计 - 在桌面中显示无

5 个答案: