响应式网页设计 - 在桌面上不显示答案

【问题标题】：Responsive Web Design - Display None in Desktop响应式网页设计 - 在桌面上不显示
【发布时间】：2015-09-29 11:01:26
【问题描述】：

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

【问题讨论】：

取决于您要在这里实现的目标。如果设置“display:none”，菜单将不显示。你还期待什么。您应该改为更改 css 以获得所需的显示

标签： css responsive-design

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我为您的困惑道歉。当人们在台式计算机上查看时，我想隐藏#mobile-nav。如何做到这一点？

【解决方案4】：

你不能创建一个具有 min-width:700px（或任何你的移动断点）的媒体查询，并且在这个媒体查询中你可以显示：none !important #mobile-nav？

【讨论】：

【解决方案5】：

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

【讨论】：