响应式/自适应设计答案

【问题标题】：Responsive/Adaptive Design响应式/自适应设计
【发布时间】：2015-03-21 16:24:29
【问题描述】：

首先要感谢您查看这篇文章。

我目前正在尝试获得一些 html、CSS 和 JavaScript 方面的经验，以便尝试涉足前端开发人员领域。我今天一直在研究这种自适应设计，但出现了一些问题。以下是以下问题：

当我重新调整屏幕大小时，我无法让右 DIV 与左 DIV 保持在同一行。在此过程中，我将添加媒体规则，以使尺寸对手机/平板电脑用户的响应更加灵敏。

body {
  margin: 0px;
  color: #fff;
  font: 600 14px/24px"Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.container {
  width: 100%;
}
.contentcontainer {
  width: 100%;
}
#header,
#nav {
  border-radius: 23px;
}
#header h1 {
  text-align: center;
  color: white;
  padding-top: 35px;
}
#header {
  background: #2db34a;
  height: 100px;
  margin: 15px 10px 0px 10px;
}
#nav {
  background: #008e7b;
  height: 50px;
  margin: 10px 10px 0px 10px;
}
#nav h2 {
  text-align: center;
  color: white;
  padding-top: 10px;
}
#left,
#middle,
#right {
  border-radius: 23px;
}
#left {
  float: left;
  width: 22%;
  background: #7DC242;
  height: 200px;
  margin: 15px 10px 0px 10px;
}
#middle {
  float: left;
  width: 75.5%;
  background: #F68A1F;
  height: 200px;
  margin: 15px 10px 0px 10px;
}
#middle h1 {
  text-align: center;
  color: white;
  padding-top: 55px;
}
#left h1 {
  text-align: center;
  color: white;
  padding-top: 55px;
}

<body>
  <div class="container">
    <div id="header">
      <h1>Header</h1>
    </div>
    <div id="nav">
      <h2>Navigation</h2>
    </div>
  </div>
  <div class="contentcontainer">
    <div id="left">
      <h1>Left</h1>
    </div>
    <div id="middle">
      <h1>Middle</h1>
    </div>
  </div>
</body>

你也可以看到，我的代码中可能有一些重复的项目和一些不必要的项目，如果你能给我一些关于如何让我的代码更小和加载更快的提示，那也太棒了！

谢谢！ :) -宁子安格林

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

当您想要创建响应式 div 行时，我真的建议不使用边距，而是使用填充。至少对于左和右。为什么？我会解释的。

当您使用边距时，您必须进行计算（使用 css calc() ）以使其正常工作。这是因为，如果您设置列宽，则不包括边距，并且列实际上更宽 --> 不适合

当您将填充与box-sizing: border-box 结合使用时，列仍会被拆分（除了它们的背景），但列的宽度不会比您在 css 中定义的宽（因为边框-盒子）。 --> 列很合适，它确实让您的生活更轻松。

示例： http://jsfiddle.net/n0acjahj/

【讨论】：