Question

我在让我的网站在移动和桌面浏览器上正常运行时遇到问题。

我的格式如下：

<body>
    <div id="div1"><div class="container"></div></div>
    <div id="div2"><div class="container"></div></div>
    <div id="div3"><div class="container"></div></div>
</body>

div1，div2和div3中的每一个都有纯色背景颜色，我希望它们拉伸以匹配浏览器的宽度，在每个内部我都有一个带有“容器”类的div，它具有宽度属性： 1000像素;

我希望所有内容的宽度都是1000像素，但我希望彩色的div能够拉伸以匹配浏览器的宽度。

这在桌面上工作正常，但我遇到了移动问题。我正在使用HTML5 Boilierplate

如果您在移动设备上提取此链接并将其与在桌面上打开它进行比较，则可以看到问题： http://svth.azurewebsites.net/

Answer 1

问题出在你的方法中：将元素固定在1000px，然后将它们显示在比那个更薄的窗口中，无论设备如何都不会很好。

如果您只是希望div与浏览器的宽度相匹配，但仍然以1000像素宽停止，则替换“width：1000px;”在你的.container CSS中，“max-width：1000px;”

如果这不是您想要的目标，请告诉我们，以便提供更具体的答案。

请注意，IE6不支持max-width属性。如果您愿意支持此浏览器，则存在多种解决方法。例如，您可以包含Respond.js和这个额外的CSS：

@media (min-width: 1000px) {
  .lt-ie7 .container {
    width: 1000px;
  }
}

Answer 2

听起来您正在尝试为您的网页创建自适应设计。如果是这种情况，您应该采取一些措施来帮助您完成此过程。有几个非常好的网络资源可以帮助你解决这个问题。

Example 1 Example 3 Example 2

有很多要消化的东西，但它几乎归结为两件事。

保持页面灵活，所有宽度均为%或em。因此，请使用width:80%代替width: 1000px
使用媒体查询更改不同屏幕尺寸的CSS。在这种情况下，移动大小的屏幕。

在移动浏览器上使用流体固定布局的问题

2 个答案: