可折叠边距 HTML/CSS答案

【问题标题】：Collapsible Margins HTML/CSS可折叠边距 HTML/CSS
【发布时间】：2013-03-07 12:02:20
【问题描述】：

我的主题占据了屏幕宽度的 50%，这在较大的屏幕上留下了很好的边距。但是在较小的屏幕上，这会占用宝贵的屏幕空间。是否可以让边距“折叠”以保持主题宽度？或者可能给出可接受的宽度范围？基本上，我希望在主题缩小之前缩小边距。

<!doctype html>

<html>

  <head>
  </head>

  <body style="margin-left:auto; margin-right:auto; width:50%;">

    <p style="height:100%; background:#878787;">some text</p>

  </body>

</html>

【问题讨论】：

标签： html css margin

【解决方案1】：

您可以考虑使用 CSS @media 查询。

为确保边距在内容之前缩小，请为内容和margin: 0 auto 使用固定像素宽度。

而当像素宽度比屏幕宽时，让那个宽度变小：

body {
    width: 500px;
    margin: 0 auto;
}

@media screen and (max-width: 500px) {
    body {
        width: 250px;
    }
}

【讨论】：