Html 使用css时，响应菜单不起作用

1） 下面是我用于响应菜单栏的代码

2） 这是像素大小（768px），但当我尝试运行此功能时，菜单会重新调整大小，但不会显示

元素

3） 请检查完整代码的链接

4） 下面是一些idea的代码

  <input type="checkbox" id="toggle" />
  <label for="toggle" class="toggle" onClick=""></label>
  <nav>
    <ul class="menu">
       ----------------------
       ----------------------
       ----------------------
    </ul>

---

对于您的案例，将fiddle输出区域的大小调整为768px，因为代码中只有一个css媒体查询，因此它仅适用于该案例

或

为所有设备编写css媒体查询，使其可根据设备进行调整。 请参阅以下链接：

尝试以这种方式进行修改：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

1） 更换后的标签和标签

2） 就像下面一样，使用相同的代码

3） 请检查此链接

----------------------
----------------------
----------------------

在fiddle中调整输出区域的大小，它可以工作。将“最大宽度”更改为“最小宽度”，或为“最小宽度”添加一个css媒体查询：）“不工作”-不是问题陈述。它将如何工作。。？你说的“这是像素大小（768px）”是什么意思？你说它正在响应（据我所知，它会相应地适应所有屏幕大小，而不是特定的大小）。谢谢你的重播。它的大小被重新调整了，但如果我点击主菜单按钮，菜单就不会显示

元素，请帮助我。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

<nav>
<input type="checkbox" id="toggle" />
<label for="toggle" class="toggle" onClick=""></label>
    <ul class="menu">
       ----------------------
       ----------------------
       ----------------------
    </ul>