如何在没有框架和大量图书馆的情况下建立网站-DEV365 开发者社区

在没有框架和大量图书馆的情况下建立一个响应式网站需要仔细的计划和某些关键技术的实施。这是如何使用HTML，CSS和JavaScript创建响应式网站的示例：

html（index.html）：

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Website</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Responsive Website</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main>
    <section>
      <h2>About</h2>
      <p>This is a sample responsive website.</p>
    </section>

    <section>
      <h2>Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>SEO</li>
        <li>Graphic Design</li>
      </ul>
    </section>

    <section>
      <h2>Contact</h2>
      <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <button type="submit">Submit</button>
      </form>
    </section>
  </main>

  <footer>
    &copy; 2023 My Responsive Website. All rights reserved.
  </footer>

  <script src="script.js"></script>
</body>
</html>

CSS（styles.css）：

/* Reset default styles */
body, h1, h2, p, ul, li {
  margin: 0;
  padding: 0;
}

/* Header styles */
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* Navigation styles */
nav ul {
  list-style-type: none;
  background-color: #666;
  overflow: hidden;
}

nav ul li {
  float: left;
}

nav ul li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #444;
}

/* Main section styles */
main {
  padding: 20px;
}

/* About section styles */
section {
  margin-bottom: 20px;
}

/* Contact form styles */
form {
  display: grid;
  gap: 10px;
}

/* Footer styles */
footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

JavaScript（script.js）：

// JavaScript code can be added as per your requirements

在此示例中，HTML结构类似于上一个结构，但是我们添加了更多部分以证明响应能力。 CSS文件包含用于使网站响应的其他样式。

要使网站响应迅速，您可以将媒体查询添加到CSS文件中。这是如何修改CSS以使导航响应的一个示例：

这是如何修改CSS以使用媒体查询来响应导航的一个示例：

/* Navigation styles */
nav ul {
  list-style-type: none;
  background-color: #666;
  overflow: hidden;
}

nav ul li {
  float: left;
}

nav ul li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #444;
}

/* Media query for responsive navigation */
@media (max-width: 768px) {
  nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  nav ul li {
    float: none;
    margin-bottom: 10px;
  }
}

在上述代码中，使用@media添加了媒体查询，以最大宽度为768像素的目标屏幕。在此媒体查询中，通过更改flex-direction属性进行了修改以垂直显示导航菜单。 float属性设置为none，以供列表项目删除水平对齐，并添加了margin-bottom以在列表项目之间提供一些间距。

您可以添加更多媒体查询并根据您的特定响应设计要求调整样式。

记住，响应式设计涉及将网站的布局和样式调整为不同的屏幕尺寸和设备。它通常需要其他CSS技术，例如使用相对单元（例如百分比，em，rem）进行尺寸元素，采用灵活的布局（例如Flexbox或CSS网格），并为不同设备优化媒体（图像，视频）。

这是如何使用CSS媒体查询来使主内容部分响应的一个示例：

/* Main section styles */
main {
  padding: 20px;
}

/* About section styles */
section {
  margin-bottom: 20px;
}

/* Media queries for responsive layout */
@media (max-width: 768px) {
  main {
    padding: 10px;
  }

  section {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  main {
    padding: 5px;
  }
}

在上述代码中，添加了两个媒体查询以定位不同的屏幕宽度。第一个媒体查询目标最大宽度为768像素，并调整主内容部分的填充和边距。第二个介质查询目标最大宽度为480像素，并进一步调整填充。

您可以根据您的特定设计要求自定义这些媒体查询。这个想法是使用媒体查询在不同的屏幕尺寸上应用不同的样式，使您的网站响应迅速并确保在各种设备上获得更好的用户体验。

此外，在响应式设计方面，重要的是考虑其他方面，例如灵活的图像，流体排版，移动友好的形式以及优化不同屏幕方向的布局。

随时添加更多媒体查询并根据需要调整样式，以实现您网站的理想响应行为。

关于作者。 Geoffrey Callaghan是Fabform.io的高级程序员，在form backend service团队中工作。