我發(fā)現(xiàn)我對這類問題可能不清楚，所以我會(huì)盡力用兩種格式解釋它：1）目前我正在研究我的網(wǎng)站的響應(yīng)性和可用性。由于我的菜單在 pc 上看起來不錯(cuò)，但在移動(dòng)設(shè)備上不好看，我想使用一個(gè)導(dǎo)航欄，它只在智能手機(jī)上可見。我在 W3Schools 上找到了一些幫助，但它不會(huì)讓我有針對不同分辨率的單獨(dú)菜單。如何在我的 html 頁面上添加一個(gè)在電腦屏幕或平板電腦上不可見但在手機(jī)上可見的 div？2) 這就是我要找的：我想要 2 個(gè)菜單，一個(gè)僅用于個(gè)人電腦/筆記本電腦或平板電腦屏幕，另一個(gè)僅用于智能手機(jī)。我想在智能手機(jī)菜單上使用導(dǎo)航欄（使用漢堡菜單）。如果我在主頁上使用導(dǎo)航欄的類，它會(huì)以每種格式顯示，而如果我使用 display: none; 它不會(huì)在任何地方顯示。我該如何解決？我在stackoverflow（和其他網(wǎng)站）上搜索了這個(gè)問題并找到了一個(gè)類似的問題，盡管到目前為止那里的解決方案對我沒有用。如果那里的答案實(shí)際上滿足了我在這里提出的問題，那么我做錯(cuò)了什么？當(dāng)前代碼：html:<div class="topnav">  <a href="#home" class="active">Logo</a>  <div id="myLinks">    <a href="#news">News</a>    <a href="#contact">Contact</a>    <a href="#about">About</a>  </div>  <a href="javascript:void(0);" class="icon" onclick="myFunction()">    <i class="fa fa-bars"></i>  </a></div><script type="text/javascript">function myFunction() {  var x = document.getElementById("myLinks");  if (x.style.display === "block") {    x.style.display = "none";    } else {    x.style.display = "block";  }}CSS：/*I won't put all css in here, as it would get a bit messy*/* {box-sizing: border-box;}.topnav {  display: block;}@media only screen and (max-height: 768px){.topnav {overflow: hidden;background-color: #333;position: relative;}.topnav #myLinks {display: none;}.topnav a {color: white;padding: 14px 16px;text-decoration: none;font-size: 17px;display: block;}.topnav a:hover {background-color: #ddd;color: black;}.active {background-color: #4CAF50;color: white;}}