Question

我想要一个内容居中的网页，并指定最小宽度，以便在智能手机的小屏幕上调整大小，但在PC上看起来仍然很好。

如果我将div的宽度设置为1024px，并且自动设置边距，那么当浏览器窗口拉伸时，div会保持居中。

但显然这需要用户在小屏幕上查看网站时向侧面滚动。

所以我尝试将宽度更改为“min-width：480px”，并且div不会在大型浏览器窗口中保持居中。

我已经完成了很多谷歌搜索和博客/论坛的帖子，这个主题声称你所要做的就是设置最小宽度和自动边距。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
    *
    {
      padding:0;
      margin:0;
    }
    #content
    {
      margin: 0px auto;
      min-width: 480px;
      background:#BBB;
      height:800px;
    }
    </style>
  </head>
  <body>
    <div id="content">
      <span>content</span>
    </div>
  </body>
</html>

在这个阶段，我只是在Chrome中测试。

Answer 1

那是因为min-width是约束而不是宽度声明。使用margin:0 auto进行自动居中只需要使用宽度声明即可。一个建议是只为您的#content区域定义宽度，并为宽度为100％的移动设备添加@media查询。

e.g。

#content { width:960px; }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) {
    #content {
        width:100%;
    }
}

Answer 2

是的，min-width会在小屏幕上使你的div宽480px - 这意味着如果屏幕小于480px，你的div将不适合。

问题是，div是一个块元素，所以如果你不指定宽度，它将拉伸到与父元素一样宽。

我建议调查media queries

我希望它有所帮助！

Answer 3

当p被告知小于小于宽度值时，
min-width将启动。如果您将div的宽度设置为width: 1024px;，则它始终为1024px。但是，如果将其设置为百分比值（即100％，93.75％等），它将缩小，并且最小宽度值将在100% < min-width后启动。因此，将div的宽度设置为百分比值，你应该好好去。

此外，我并不喜欢将我的所有内容整理到一个包含所有内容的内容 div中。也许我只是挑剔，但恕我直言，这就是<body></body>元素的用途。您可以将margin: 0 auto;添加到Body元素，这将使所有内容相对于浏览器居中。然后，那里的特定元素的边距取决于你。无论如何，值得深思。

Answer 4

您没有为内容容器指定固定的width，因此默认情况下它将占用其父级的全部宽度。

如果您有固定的min-width，则无法设置width。

通常情况下，您只有一个单独的CSS表单，仅用于移动设备并使用媒体查询。

当最小宽度设置时，Div不居中

4 个答案: