Question

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

我有两个水平和垂直居中的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

如果我理解你，你应该添加

chars = text.split(/(?!$)/u),
chars = text.split(new RegExp("(?!$)", 'u'))
chars = text.split(new RegExp('/(?!$)/', 'u'));

或

flex-flow: row wrap;

在#about。

Answer 2

我已经在上一篇文章中解决了你的问题，但还可以。首先，我建议你停止使用花车，因为花车是历史和漂浮：没有;什么也不做，因为默认元素不会像你在codepen中写的一样浮动。其次，我建议你仔细看看Flexbox及其带来的可能性，因为它在响应式网页设计/开发方面真的很棒。

再次，通过在媒体查询中添加以下代码来解决问题：

#about {
  flex-direction: column;
}

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

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

Answer 3

它没有堆叠的原因是因为您将内容与div标签分开。将该部分设为col并按照此处设置样式：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

在bootstrap中，有一个行标记就像div标记一样。但每个栏目都是文字的＃34; col - **＆＃34;他们背后的造型。

使用媒体查询的响应式HTML和CSS

3 个答案: