文章/答案/技术大牛

发布

社区首页 >问答首页 >Accordian菜单和网站响应度

问Accordian菜单和网站响应度
EN

Stack Overflow用户

提问于 2014-02-25 15:41:03

回答 1查看 116关注 0票数 0

对于我的网站，我做了一个手风琴菜单水平。我从互联网上的一些代码中获得灵感。问题是这是没有反应的。如果有人放大，菜单的一半就消失了。有没有办法改变它，也许当分辨率太低的时候？我试过：

@media only screen and (max-device-width: 900px) {
   #menu{
     display:none;
 } 
}

但不起作用。因为如果分辨率太低，我可以放一个下拉菜单。

http://jsfiddle.net/2SRg4/

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-25 15:52:34

您需要在这里做几件事，首先，您应该确保您有一个meta标记，以便控制设备缩放以响应设计。用这样的东西

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

其次，你的元标签只适用于设备，所以如果你在你的电脑上进行测试，它就不能工作。如果您希望@media (max-width: 900px) { }在计算机和设备上响应，请使用它

更新

示例：http://jsfiddle.net/A8ynL/

<div id="mainMenu"><!-- Stuff --></div>
<div id="phoneMenu"><!-- Stuff --></div>

CSS

#mainMenu { width: 100%; height: 50px; background-color: green; display: block; }
#phoneMenu { display: none; }

@media (max-width: 900px) {
    #mainMenu { display: none; }
    #phoneMenu { display: block; width: 100%; height: 50px; background-color: blue; }
}

页面结构

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Title</title>
<style>
/*Normal CSS*/
@media (max-width: 900px) {
 /*Responsive CSS*/
}
</style>
</head>
<body></body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22019098

复制

相似问题

问Accordian菜单和网站响应度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Accordian菜单和网站响应度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Accordian菜单和网站响应度
EN