html - 使用媒体查询的响应式 html 和 css

Question

在我之前的问题中，我问了一个类似的问题，但使用的是 Bootstrap 框架。我希望能够在不使用 bootstrap 的情况下创建一个响应式页面，因为我不太喜欢网格系统。

我有两个水平和垂直居中的 div。我希望它能够响应并在窗口最小化时堆叠在一起。我的code在 CodePen 上。我已经尝试了几次，但我仍然不确定如何处理它:

@media only screen and (max-width: 768px){
  #about #aboutInfo{
    border: solid;

    float:none;
    text-align: center;
    width: 100%;
  }
  #about #aboutInfo{
    float: none;
    width: 100%;
  }
}

Answer 1

我已经在上一篇文章中解决了您的问题，但是没关系。首先，我建议你停止使用 float，因为 float 是历史，float: none;什么都不做，因为默认情况下元素不会像你在代码笔中写的那样 float 。其次，我建议您仔细研究一下 Flexbox 及其带来的可能性，因为它在响应式网页设计/开发方面确实大放异彩。

再次，通过将以下代码添加到您的媒体查询来解决问题:

#about {
  flex-direction: column;
}

而且就像我之前告诉过你的那样，使用一些基本的 CSS 浏览器重置总是好的:

* {margin: 0; padding: 0; box-sizing: border-box}