为某些分辨率添加元素

Question

我发现我对这类问题可能不清楚，所以我会尽力用两种格式解释它：

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;

}

}

Answer 1

要设置媒体查询，您可以使用@media (//media size in here) {&nbsp;&nbsp; // css for that media query in here}一个真实的例子是，例如@media (max-width: 990px) {&nbsp; .menu {&nbsp; &nbsp; display: none;&nbsp; }}通过执行以下步骤可以实现基本的汉堡菜单：1) 使用 burger-menu 类创建一个作为要在移动屏幕宽度上隐藏的导航的前一个兄弟元素。a）您不希望它显示在您的桌面媒体上，因此在 css 中，将其设置为 display: none;2) 为所需设备创建媒体查询。假设移动设备为 480 像素。3）在此媒体查询中，将您希望在悬停（或单击）时显示的导航设置为 display: none;4) 在此媒体查询中，为您的汉堡菜单设置样式。在我的示例中，出于时间原因，我设置了一些非常基本的样式，但您可以研究使用 span 来制作响应式汉堡菜单。5）在这个媒体查询中，为你的汉堡菜单声明一个悬停伪类，它可以访问隐藏的导航。由于您将 burger-menu 作为导航的前一个兄弟元素放置，因此您可以使用 + css 规则来定位它.burger-menu:hover + .menu {}这意味着，当您将鼠标悬停在汉堡菜单上时，您将影响 .menu 的 css。您可以在上面的 CSS 选择器中放置 .menu 的样式将如何受到影响。这是此过程如何与您的代码一起使用的基本示例。将此添加到您的 .menu 之前的 html<div class="menu">将此添加到您的 css 文件中，在底部.burger-menu {&nbsp; display: none;}@media (max-width: 480px) {&nbsp; .menu {&nbsp; &nbsp; display: none;&nbsp; }&nbsp; .burger-menu {&nbsp; &nbsp; display: block;&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; height: 30px;&nbsp; &nbsp; width: 30px;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 10px;&nbsp; &nbsp; right: 10px;&nbsp; }&nbsp; .burger-menu:hover + .menu {&nbsp; &nbsp; display: block;&nbsp; }}通常，您可以通过使用带有 JQuery 的 toggleClass 在单击汉堡菜单时向导航菜单添加和删除显示来推进这一点。Ps 使用跨度创建汉堡菜单的好处是当你希望它有漂亮的动画时，从汉堡菜单变为十字或箭头等。

Answer 2

（对不起我的英语不好，我也知道这个回复有点晚了，但我希望它有帮助）你可以有一个用于 PC 的 CSS 文件（在我的示例中称为 pc.css），它隐藏了用于移动设备的菜单display: none;和另一个它做同样的事情，但隐藏了用于 PC 的那个（在我的示例中称为 mobile.css）。这可以通过以下 JS 来完成，该 JS 检查您的屏幕宽度是否小于或等于 699px，然后将 CSS 文件 pc.css 更改为 mobile.cssif (screen.width <= 699) {&nbsp; &nbsp; // get all links in the head (including CSS)&nbsp; &nbsp; var allLinks = document.head.getElementsByTagName('link');&nbsp; &nbsp; // find and replace the element&nbsp; &nbsp; for (var i = 0; i < allLinks.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; if (allLinks[i].href = "pc.css") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allLinks[i].href = "mobile.css";&nbsp; &nbsp; &nbsp; &nbsp; }