如何使用 Html 和 Css 制作响应式网站？

【问题标题】：How to make responsive website using Html and Css?如何使用 Html 和 Css 制作响应式网站？
【发布时间】：2022-12-04 18:49:48
【问题描述】：

我已经使用 html 和 css 作为迷你项目进行了旅行。但现在我想让它响应所有设备。

我尝试让它响应，但我无法使其完全响应，我无法修复我网站的图像和页脚。

【问题讨论】：

“响应式”只是意味着“适应不同的窗口大小”。我们不知道您的代码是什么样的，它现在做什么，或者您希望它如何适应屏幕尺寸。请阅读How to Ask并提供minimal reproducible example。

标签： javascript html css

【解决方案1】：

利用媒体查询和CSS弹性框.

媒体查询允许您为不同的屏幕尺寸指定不同的样式。移动设备、大屏幕等

CSS flexbox 是创建灵活的布局，自动调整到屏幕的大小。

<style>
/* Mobile styles */
@media only screen and (max-width: 600px) {
  /* Make the website full-width */
  body {
    width: 100%;
  }

  /* Use flexbox to arrange the website elements */
  .container {
    display: flex;
    flex-direction: column;
  }

  /* Make the header and footer full-width */
  header, footer {
    width: 100%;
  }

  /* Make the images full-width and resize them to fit the screen */
  img {
    width: 100%;
    height: auto;
  }
}
</style>

<body>
  <div class="container">
    <header>
      ...
    </header>

    <main>
      ...
    </main>

    <footer>
      ...
    </footer>
  </div>
</body>

【讨论】：