html - 具有固定宽高比的响应列(但不超过两个)

Question

我很难尝试结合一些东西:

1. 我想要两列填充 100% 的浏览器宽度，高度相对到此宽度。
2. 我希望它在视口(viewport)较小时切换到一列。
3. 而且(这可能是不可能的)我希望字体大小响应列宽，而不是视口(viewport) - 这样当只有一列的空间时，字体大小会比它本来的大分成两列。

我已经拼凑了这个:http://jsfiddle.net/k5x7L682/ - 但是保持比例的代码在 footer 创造了额外的空间。下面的 CSS:

#column {
background-color: grey;
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-moz-column-fill: balance;
-webkit-column-fill: balance;
column-fill: balance;
display: inline-block;
position: relative;
}
#column:after {
padding-top: 80%;
display: block;
content: '';
}
p {
font-size: 2.2vw;
}

感谢您花时间阅读本文...

Answer 1

要变成 1 列而不是两列，您应该只使用 column-count 并删除 column-width。

mediaquerie 将完成字体大小的工作:

http://jsfiddle.net/k5x7L682/2/ > 与 chrome 相比http://jsfiddle.net/k5x7L682/4/

#column {
  background-color: grey;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em;
  -moz-column-fill: balance;
  -webkit-column-fill: balance;
  column-fill: balance;
  display: inline-block;
  position: relative;
}
p {
  font-size: 2.2vw;
}
#column p:first-child {
  margin-top: 0px;
}
@media (max-width: 35em) {
  #column {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  #column p {
    font-size: 1.5em;
  }
}

<div id="column">
  <p>Lorem ipsum dolor sit amet, tempor phasellus. Integer sodales nonummy in mi augue, aliquet sem posuere nonummy per, ut sed eu mollis rutrum in. Donec enim posuere eget quam sed, urna luctus porta placerat amet interdum, porttitor metus condimentum nec,
    venenatis quis gravida in et eleifend tempor, at suscipit amet libero porta. Viverra adipiscing, egestas velit sit. Sollicitudin morbi non natoque egestas pede. Senectus sed, rhoncus vestibulum massa in, gravida suspendisse nulla, tempor a nec ultricies,
    pharetra ornare vel sed magna varius ante. Convallis tincidunt urna euismod fringilla, autem nulla quis vivamus aliquam. Sem ipsum arcu congue scelerisque ipsum tincidunt. Scelerisque bibendum, cum congue, scelerisque ut in morbi. Ut ornare blandit
    quis vitae mauris. Quis morbi pellentesque praesent mauris id imperdiet, metus gravida amet orci aliquam, nulla et adipiscing eu sit libero. Eget nulla ea, sagittis hendrerit cupidatat in turpis, suspendisse tellus fusce ligula nulla tincidunt quis,
    deserunt ut dictum est vestibulum aenean. Nec phasellus rerum tempus nulla, odio sequi vitae orci justo fermentum. Justo ipsum. Donec aliquam eleifend cras nec dapibus, pharetra leo, sem eu, amet pharetra aliquam felis morbi. Lorem ipsum dolor sit
    amet, tempor phasellus. Integer sodales nonummy in mi augue, aliquet sem posuere nonummy per, ut sed eu mollis rutrum in. Donec enim posuere eget quam sed, urna luctus porta placerat amet interdum, porttitor metus condimentum nec, venenatis quis gravida
    in et eleifend tempor, at suscipit amet libero porta. Viverra adipiscing, egestas velit sit. Sollicitudin morbi non natoque egestas pede. Senectus sed, rhoncus vestibulum massa in, gravida suspendisse nulla, tempor a nec ultricies, pharetra ornare
    vel sed magna varius ante. Convallis tincidunt urna euismod fringilla, autem nulla quis vivamus aliquam. Sem ipsum arcu congue scelerisque ipsum tincidunt. Scelerisque bibendum, cum congue, scelerisque ut in morbi. Ut ornare blandit quis vitae mauris.
    Quis morbi pellentesque praesent mauris id imperdiet, metus gravida amet orci aliquam, nulla et adipiscing eu sit libero. Eget nulla ea, sagittis hendrerit cupidatat in turpis, suspendisse tellus fusce ligula nulla tincidunt quis, deserunt ut dictum
    est vestibulum aenean. Nec phasellus rerum tempus nulla, odio sequi vitae orci justo fermentum. Justo ipsum. Donec aliquam eleifend cras nec dapibus, pharetra leo, sem eu, amet pharetra aliquam felis morbi.</p>
</div>

如果想法是每 20em 有 2 列 max-width，您可以给 #column 容器一个 max-width:40em 左右以避免它增长太多。 (不太确定你在这里想要什么，因为使用了大众单位。)