如何使用 javascript 和媒体查询创建响应式网站？ [关闭]

Question

我想让我的网站在以下条件下响应：

1. 屏幕缩小时导航栏必须是垂直的汉堡下拉菜单，编码必须是java-script
2. 我想使用媒体查询来实现移动优先策略。

我在这里有点困惑，因为我在你的电子管上观看的所有教程都是关于 Bootstrap 的，我不喜欢那样。

提前谢谢你。

Answer 1

我建议查看免费的在线资源来学习媒体查询。我经常参考的两个质量可靠来源是Mozilla Developer Network 和W3 Schools。

这是一个媒体查询示例，如上面第二个链接所示：

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

这个想法是首先为较小的视口布局您的页面，然后随着屏幕尺寸变大而更改布局，通常使用 css。因此，术语“移动优先”。这通常是处理布局的最佳方式，不仅因为移动网络流量已经超过了更大视口的网络浏览，还因为移动版本的网站往往更加简单和精简。随着视口大小的增加，它更容易增加复杂性，而不是相反。

至于汉堡菜单，这里有一个W3 School's tutorial 来帮助你学习并给你一些代码来玩。一定要让你的浏览器窗口越来越小才​​能看到效果：

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

对所发生情况的基本概述是，结合根据应用的媒体查询（在不同的视口宽度）更改样式，当单击汉堡菜单时样式也会更改，因为 JavaScript .onclick method 正在监听单击元素上的事件。单击该元素时，JavaScript manipulates the DOM 并通过更改它的 className property 来更改该元素。应用不同的类来改变样式。所以简而言之，当有人点击汉堡图标时，页面的布局会发生变化。

因此，为了创建良好的移动响应式网站，不使用像 Bootstrap 这样的框架并假设您对 HTML 有很好的理解，您至少应该学习：

• 媒体查询
• 使用css布局页面
• 使用 Javascript 操作 DOM