使用媒体查询的内容超出了 Flexbox 限制！有什么解决方案吗？-解网

问：

就像标题所说，我正在使用的 flexbox 中的内容超出了使用媒体查询时的限制。

让我向你解释一下：

我正在设计一些响应式内容块作为练习，当最大屏幕宽度为 850px 时，它们从并排变为彼此重叠。为此，我一直在学习，使用了媒体查询。

现在，当媒体查询对代码进行更改时，两个 div 的边距以及它们的填充都会被更改和错位，使它们不均匀，然后使用开发人员工具标记 div 如何超出 Flexbox 的边缘，并且它们的边距是不规则的。

这是我的代码，包括 HTML 和 CSS：

[HTML全文]

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta lang="en">
        <link  rel="stylesheet" type="text/css" href="styles.css">
        <title>Test Area</title>
    </head>
    <body>
        <div class="container">
            <div class="principal">
                <h1>Principal</h1>
                <p>Culpa sint qui exercitation occaecat nulla sunt excepteur sunt eiusmod Lorem dolore ullamco minim. Elit deserunt dolor reprehenderit reprehenderit id excepteur sunt Lorem et nulla labore officia sit proident. Occaecat nostrud esse in anim dolore. Esse culpa mollit officia nulla sunt fugiat deserunt irure. Lorem ipsum occaecat laboris officia et cillum dolor aute. Proident aute pariatur sit dolor irure sint nostrud ut et aliquip ex.</p>
            </div>
            <div class="secondary">
                <h2>Secondary</h2>
                <p>Laborum et id dolor sit qui nulla laborum adipisicing nulla veniam aliqua ut ipsum. Laborum veniam consequat aliqua esse. Ea velit velit et proident do mollit aliquip esse Lorem officia. Dolore elit sit sint aliqua laborum velit cillum quis. Velit adipisicing ut consectetur occaecat. Non voluptate ad nisi enim ut voluptate ullamco nostrud aute.</p>
            </div>
        </div>
    </body>
</html>

CSS的

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;600&display=swap');

/* General Styles Preset */

body{
    box-sizing: border-box;
    margin: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
}

h1, h2{
    font-size: 28px;
}

.container{
    display: flex;
    justify-content: space-between; 
}

.principal{
    background-color: aquamarine;

    box-sizing: border-box;
    width: 60%;

    margin: 5px;
    padding: 10px;
}

.secondary{
    background-color: cadetblue;
    
    box-sizing: border-box;
    width: 40%;

    margin: 5px;
    padding: 10px;
}

@media screen and (max-width: 850px) {

    .container {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .principal, .secondary{
        flex: none;
        width: 100%;
    }
}

下面是一些使用开发工具时的图片：

我试过什么？

我试图在 YouTube、Stack overflow 和人工智能中寻找解决方案，但遗憾的是，我没有找到任何解决我问题的答案，也没有在 overflow 中找到与我相关的问题。

我希望它做什么？

基本上，我只希望，当最大屏幕宽度为 850 像素时，这些块不是并排的，而是彼此重叠的。这个想法是在宽度超过 850 像素的屏幕上尊重两个块的 60%/40% 宽度。

此外，很明显，要指出的是，当媒体查询被激活时，边距和填充保持统一、有序和均匀。

我希望我能够解释这一切，我将根据需要编辑这个问题，谢谢！

HTML CSS Flexbox 媒体查询

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;600&display=swap');

body {
  box-sizing: border-box;
  margin: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
}

h1, h2 {
  font-size: 28px;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.principal, .secondary {
  box-sizing: border-box;
  padding: 20px;
}

.principal>*:first-child, .secondary>*:first-child {
  margin-top: 0;
}

.principal>*:last-child, .secondary>*:last-child {
  margin-bottom: 0;
}

.principal {
  background-color: aquamarine;
}

.secondary {
  background-color: cadetblue;
}

@media (min-width: 850px) {
  .container {
    flex-direction: row;
  }
  .principal {
    width: 60%;
  }
  .secondary {
    width: 40%;
  }
}

<div class="container">
  <div class="principal">
    <h1>Principal</h1>
    <p>Culpa sint qui exercitation occaecat nulla sunt excepteur sunt eiusmod Lorem dolore ullamco minim. Elit deserunt dolor reprehenderit reprehenderit id excepteur sunt Lorem et nulla labore officia sit proident. Occaecat nostrud esse in anim dolore. Esse culpa mollit officia nulla sunt fugiat deserunt irure. Lorem ipsum occaecat laboris officia et cillum dolor aute. Proident aute pariatur sit dolor irure sint nostrud ut et aliquip ex.</p>
  </div>
  <div class="secondary">
    <h2>Secondary</h2>
    <p>Laborum et id dolor sit qui nulla laborum adipisicing nulla veniam aliqua ut ipsum. Laborum veniam consequat aliqua esse. Ea velit velit et proident do mollit aliquip esse Lorem officia. Dolore elit sit sint aliqua laborum velit cillum quis. Velit adipisicing ut consectetur occaecat. Non voluptate ad nisi enim ut voluptate ullamco nostrud aute.</p>
  </div>
</div>

运行此代码段后，请确保使用整页链接来测试响应行为。

这些声明删除每个块的第一个内容项的上边距，以及最后一个内容项的下边距。这样，块的四个边缘与块内内容边缘之间的空间完全由块上定义的填充组成。这意味着您可以在所有四个侧面获得一致的空间。如果您对这些规则进行注释，或在浏览器检查器中禁用它们，您会看到这会导致每个块的顶部和底部空间过大。

上一个：使用媒体查询后，如何使背景图像显示在代码的移动版本中？

下一个：样式表和媒体查询

使用媒体查询的内容超出了 Flexbox 限制！有什么解决方案吗？

Content exceeds Flexbox limits using media queries! Any Solutions?

评论

评论