响应式设计和编码的问题

Question

我在编写响应式设计时遇到了问题，我不明白为什么。问题出在我的手机上，还是代码：

<style>
@media only screen and (max-width: 380px) {
  menu {
    width: 100%;
  }
}
<style>

<ul id="menu">
    <li><a><img src="./img/logo.jpg" alt="Start">car</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">bike</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">train</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">truck</a></li>
</ul>

这不适合我在手机上垂直显示。是代码出了什么问题吗？

Answer 1

在您的CSS中，您使用menu，它选择标记名为menu的元素。如果要选择菜单，则应该使用#menu，它将选择id为menu的元素，如下所示：

<style>
@media only screen and (max-width: 380px) {
  #menu {
    width: 100%;
  }
}
<style>

<ul id="menu">
    <li><a><img src="./img/logo.jpg" alt="Start">car</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">bike</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">train</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">truck</a></li>
</ul>

Answer 2

您是否在HTML标记中添加了响应式meta标记？就是这里

<meta name="viewport" content="width=device-width, initial-scale=1.0">