响应式网站 - 将浏览器大小调整为小宽度然后再调整为大宽度时的布局问题答案

【问题标题】：Responsive site – Layout issues when resizing the browser to a small width and then back to a large width响应式网站 - 将浏览器大小调整为小宽度然后再调整为大宽度时的布局问题
【发布时间】：2013-09-04 02:50:02
【问题描述】：

我正在创建我的第一个完全响应式网站，但遇到了问题。该站点似乎在 Firefox 和资源管理器中按预期工作。给我带来问题的浏览器是 chrome 和 safari。

在页面底部的简历/登陆页面 (http://designerdsite.com/new/) 上有两个部分，一个标题为“我有技能”，另一个标题为“他们爱我”。当我加载页面时（无论浏览器宽度是什么大小），它都会正确加载，但是在浏览器宽度缩小然后重新打开布局重新定位之后。在“技能”部分，右侧的 div 低于左侧的 div。在“他们爱我”的场景中，文字落在图片下方。由于某种原因，容器 div 的宽度似乎没有被理解。也许它是别的东西。我真的不确定这里发生了什么，非常感谢任何人的任何建议。谢谢！！

【问题讨论】：

标签： html css responsive-design fluid-layout

【解决方案1】：

似乎您在您的网站上使用了media-query 对吗？？？...无论如何，我想您知道原因...例如，假设您的最后一个media-query max width 被定义为600px ...那么它会在 600px 及以下（不远）内正常工作....当您的浏览器调整为 width:480px (for ex.) 时，您的字体大小、填充等设计将变得非常大，以适应两个并排的 div... .so 如果你想让你的设计在微观宽度上保持不变，那么让我们再定义一个媒体查询来定义限制max-width:480px;

例如

.fonts{
   font-size:18px;
}
@media screen and (max-width:480px){
    .fonts{
        font-size:10px;
    }
 }

【讨论】：

【解决方案2】：

似乎所有百分比宽度都有问题。我知道 WebKit 可能存在嵌套和舍入百分比等问题，因此当页面调整大小时，图像和引号的宽度以及父元素上的填充都会重新计算。

你会看到如果你删除max-width类上的padding: 0 5%，问题就不再出现了。

尝试将引号包裹在 100% 宽度的 div 中：

<div class="quote-wrapper" style="width: 100%;">
    <div class="reference clear-both">
        <img src="images/monica.jpg" alt="Monica" class="reference-pic">
    </div>
    <div class="quote">
        <p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”</em></p>
        <p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
    </div>
</div>

【讨论】：

成功了！！太感谢了。我真的很沮丧！你统治人类！！谢谢大家的建议！
@PaulWilcox 太棒了，保罗，很高兴你把它整理好了。如果您不再需要任何帮助，您能否将答案标记为已接受？干杯。

【解决方案3】：

我在我的网站上发现了一个类似的问题。据我所知，Chrome/Webkit 似乎在浮动元素的正确（重新）定位方面存在问题。

所以有 2 个（也许更多）选项：
1. 您可以使用 Javascript 强制浏览器重新渲染（而不是重新加载！！！）这些元素（例如，通过将 display 属性更改为 none 并返回到 block）
2. 使用另一种定位变体，例如“inline-block”或“table-cell”

【讨论】：

【解决方案4】：

您为什么不使用twitter bootstrap，这将使您的生活变得非常轻松。

【讨论】：

【解决方案5】：

这与浏览器如何计算百分比有关。一个快速的解决方法是为左侧容器设置一个max-width：

#skills-left {
  float: right;
  width: 47%;
  max-width:411px;
}

【讨论】：