移动浏览器上的流体固定布局问题答案

【问题标题】：Issue with fluid-fixed layout on mobile browsers移动浏览器上的流体固定布局问题
【发布时间】：2014-01-27 03:20:23
【问题描述】：

我无法让我的网站在移动和桌面浏览器上正常运行。

我的布局格式如下：

<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 样板

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

【问题讨论】：

标签： css html mobile html5boilerplate

【解决方案1】：

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

Example 1 Example 3 Example 2

有很多东西要消化，但基本上可以归结为两件事。

保持页面灵活，所有宽度都在% 或ems。所以用width:80%代替width: 1000px
使用媒体查询为不同的屏幕尺寸更改 CSS。在这种情况下，适用于移动尺寸的屏幕。

【讨论】：

【解决方案2】：

问题出在您的方法中：将元素固定为 1000 像素，然后在比这更薄的窗口中显示它们，无论使用何种设备，都不会很好看。

如果您只是希望 div 与浏览器的宽度相匹配，但在 1000 像素宽处停止，请替换您的“宽度：1000 像素；”在您的 .container CSS 中使用“max-width: 1000px;”

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

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

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

【讨论】：