Question

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

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

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

http://jsfiddle.net/2SRg4/

Answer 1

您需要在此处执行一些操作，首先应确保拥有元视口标记，以便控制设备缩放以获得响应式设计。使用类似这样的东西

<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/

<强> HTML

<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>

手风琴菜单和网站响应

1 个答案: