响应html和css使用媒体查询

Question

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

我有两个水平和垂直居中的div。当窗口被最小化时，我希望它能够响应并且在彼此之上堆叠起来。 CodePen上的我的code。我已经尝试了几次，我仍然不知道如何处理它：

@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

我已经在上一篇文章中解决了你的问题，但是没问题。首先，我建议你停止使用浮动，因为浮动是历史和浮动：无;不做任何事情，因为默认情况下，元素不像你写在你的codepen中那样浮动。其次，我建议您仔细看看Flexbox及其带来的可能性，因为它在响应式网页设计/开发方面真的很闪亮。

#about { 
    flex-direction: column; 
} 

而且也很喜欢我告诉你们，这是一件好事，使用一些基本的CSS浏览器复位前：

* {margin:0;padding:0;box-sizing:border-box} 
html, body {width: 100%} 

如此反复，通过添加下面的代码到你的媒体查询解决问题

Answer 2

它不会堆积的原因是因为你分开使用div标签内容。使该部分成为col，并将其设置为如下样式：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

在引导程序中，存在一个行标记，其行为类似于div标记。但是每个栏目都是以“col - **”的形式出现在背后。

Answer 3

如果我理解你的权利，你应该添加

flex-flow: row wrap; 

或

flex-wrap: wrap; 

在#about

。