我發現我對這類問題可能不清楚，所以我會盡力用兩種格式解釋它：1）目前我正在研究我的網站的響應性和可用性。由于我的菜單在 pc 上看起來不錯，但在移動設備上不好看，我想使用一個導航欄，它只在智能手機上可見。我在 W3Schools 上找到了一些幫助，但它不會讓我有針對不同分辨率的單獨菜單。如何在我的 html 頁面上添加一個在電腦屏幕或平板電腦上不可見但在手機上可見的 div？2) 這就是我要找的：我想要 2 個菜單，一個僅用于個人電腦/筆記本電腦或平板電腦屏幕，另一個僅用于智能手機。我想在智能手機菜單上使用導航欄（使用漢堡菜單）。如果我在主頁上使用導航欄的類，它會以每種格式顯示，而如果我使用 display: none; 它不會在任何地方顯示。我該如何解決？我在stackoverflow（和其他網站）上搜索了這個問題并找到了一個類似的問題，盡管到目前為止那里的解決方案對我沒有用。如果那里的答案實際上滿足了我在這里提出的問題，那么我做錯了什么？當前代碼：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;}}