当我在移动用户分辨率之后更改桌面用户的屏幕分辨率时，导航菜单项不显示内联答案

【问题标题】：When I change screen resolution for desktop user after mobile user resolution Navigation Menu Item not display inline当我在移动用户分辨率之后更改桌面用户的屏幕分辨率时，导航菜单项不显示内联
【发布时间】：2018-12-11 19:04:02
【问题描述】：

我正在尝试为移动用户构建响应式切换导航菜单。当移动用户屏幕上的屏幕分辨率时，我单击切换导航框其显示导航项块，当我再次单击切换导航框时，其显示导航项无。但是当我更改桌面用户导航菜单的屏幕分辨率时，导航菜单不会内联显示。

function print(message) {
  document.write(message);
}

let myNavBox = document.getElementById("navBox");
let myNavLinks = document.getElementById("navLinks");

myNavBox.onclick = function() {

  if (myNavLinks.style.display == "block") {
    myNavLinks.style.display = "none";
  } else {
    myNavLinks.style.display = "block";
  }

}

body {
  background: #191970;
  font-family: sans-serif, serif;
}

h1 {
  font-family: 'Prata', serif;
  text-align: center;
  font-size: 35px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #000;
  font-size: 25px;
}

#navBox {
  width: 50px;
  height: 50px;
  border: 2px solid #c0c0c0;
  background: #7b68ee;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  text-align: center;
}

#navBox:hover,
li:hover {
  background-color: #6a5acd;
}

#navLinks {
  display: none;
}


/******** Responsive ********/

@media screen and (min-width:660px) {
  body {}
  #navLinks {
    display: block;
  }
  #navBox {
    display: none;
  }
  li {
    display: inline-block;
    margin-right: 15px;
  }
}

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Toggle Navigation</title>
  <link href="https://fonts.googleapis.com/css?family=Prata" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <nav id="nav">
    <h1> Toggle Navigation Tutorial </h1>
    <div id="navBox" title="Toggle Navigation"> ------- </br>
      ------- </br>------- </br>
    </div>
    <div id="navLinks">
      <ul id="topNav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </nav>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

我的代码可以工作，但是当 navLinks 显示不显示时，我的代码无法在大屏幕分辨率下工作。

【问题讨论】：

对不起先生，我是编码新手，希望我能从错误中吸取教训。我详细解释了问题：我正在尝试为移动用户构建响应式切换导航菜单。当移动用户屏幕上的屏幕分辨率时，我单击切换导航框其显示导航项块，当我再次单击切换导航框时，其显示导航项无。但是当我为桌面用户更改屏幕分辨率时，导航菜单不会内联显示。

标签： javascript html css responsive-design uinavigationbar

【解决方案1】：

只需添加

显示：块！重要；

在@媒体中

function print(message) {
  document.write(message);
}

let myNavBox = document.getElementById("navBox");
let myNavLinks = document.getElementById("navLinks");

myNavBox.onclick = function() {

  if (myNavLinks.style.display == "block") {
    myNavLinks.style.display = "none";
  } else {
    myNavLinks.style.display = "block";
  }

}

body {
  background: #191970;
  font-family: sans-serif, serif;
}

h1 {
  font-family: 'Prata', serif;
  text-align: center;
  font-size: 35px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #000;
  font-size: 25px;
}

#navBox {
  width: 50px;
  height: 50px;
  border: 2px solid #c0c0c0;
  background: #7b68ee;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  text-align: center;
}

#navBox:hover,
li:hover {
  background-color: #6a5acd;
}

#navLinks {
  display: none;
}


/******** Responsive ********/

@media screen and (min-width:660px) {
  body {}
  #navLinks {
    display: block!important;
  }
  #navBox {
    display: none;
  }
  li {
    display: inline-block;
    margin-right: 15px;
  }
}

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Toggle Navigation</title>
  <link href="https://fonts.googleapis.com/css?family=Prata" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <nav id="nav">
    <h1> Toggle Navigation Tutorial </h1>
    <div id="navBox" title="Toggle Navigation"> ------- </br>
      ------- </br>------- </br>
    </div>
    <div id="navLinks">
      <ul id="topNav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

  </nav>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

【讨论】：