为某些分辨率添加元素

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) { 

  // css for that media query in here

}

一个真实的例子是，例如

@media (max-width: 990px) {

  .menu {

    display: none;

  }

}

通过执行以下步骤可以实现基本的汉堡菜单：

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 {

  display: none;

}

@media (max-width: 480px) {

  .menu {

    display: none;

  }

  .burger-menu {

    display: block;

    background-color: white;

    height: 30px;

    width: 30px;

    position: fixed;

    top: 10px;

    right: 10px;

  }

  .burger-menu:hover + .menu {

    display: block;

  }

}

通常，您可以通过使用带有 JQuery 的 toggleClass 在单击汉堡菜单时向导航菜单添加和删除显示来推进这一点。

Ps 使用跨度创建汉堡菜单的好处是当你希望它有漂亮的动画时，从汉堡菜单变为十字或箭头等。

Answer 2

（对不起我的英语不好，我也知道这个回复有点晚了，但我希望它有帮助）你可以有一个用于 PC 的 CSS 文件（在我的示例中称为 pc.css），它隐藏了用于移动设备的菜单display: none;和另一个它做同样的事情，但隐藏了用于 PC 的那个（在我的示例中称为 mobile.css）。这可以通过以下 JS 来完成，该 JS 检查您的屏幕宽度是否小于或等于 699px，然后将 CSS 文件 pc.css 更改为 mobile.css

if (screen.width <= 699) {

    // get all links in the head (including CSS)

    var allLinks = document.head.getElementsByTagName('link');

    // find and replace the element

    for (var i = 0; i < allLinks.length; i++) {

        if (allLinks[i].href = "pc.css") {

            allLinks[i].href = "mobile.css";

        }