响应式网页设计 - 在桌面上无显示

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

来源

2012-12-02 user1869585

取决于你试图在这里实现什么。如果您设置“显示：无”，则显示粗糙。菜单将不会显示。你还期待什么？你应该改变CSS来获得所需的显示 – qais

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

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

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

来源

2012-12-03 02:36:24

我为混淆道歉。当人们在台式电脑上查看时，我想隐藏＃mobile-nav。如何才能做到这一点？ – user1869585

你要沿着这行添加一些CSS ...

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

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

或者，你可以使用这个PHP函数来检查它是否是一个移动用户代理，然后就换了手机菜单中的if语句PHP。 http://erikastokes.com/php/how-to-test-if-a-browser-is-mobile.php

来源

2012-12-03 03:31:28 mjerwin23

你可以不创建一个媒体查询有最小宽度：700px（或任何你的手机断点），并在此媒体查询中，你可以显示：无！重要＃mobile-nav？

来源

2012-12-04 23:45:06

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

来源

2013-01-19 19:05:03

如果您在媒体查询之外编写“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-04 13:15:13 ambit

响应式网页设计 - 在桌面上无显示

回答

相关问题