具有固定宽高比的响应列（但不超过两个）

Question

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

我想要两列以 相对于 高度填充浏览器宽度的 100%。
我希望在视口较小时切换到一列。
并且（这可能是不可能的）我希望字体大小响应列宽，而不是视口 - 这样当只有一列的空间时，字体大小会比如果它分为两列。

我已经拼凑了这个：http://jsfiddle.net/k5x7L682/ - 但保留比率的代码在脚部创建了额外的 space。 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

这样能满足您的要求吗？ http://jsfiddle.net/k5x7L682/3/

我使用媒体查询来增加断点处的字体大小：

@media (max-width: 44em) {
  p {
    font-size: 4.4vw;
  }
}

在计算实际断点时，您需要考虑 column-gap 和可能的外部填充，但由于您的列宽是相对于视窗宽度（约 50% 的视窗宽度），您的字体也可以基于vw。

Answer 2

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

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

http://jsfiddle.net/k5x7L682/2/ > versus chrome too 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 左右，以避免它增长太多。（不太确定你在这里想要什么 sincs vw 单位在哪里使用。）

具有固定宽高比的响应列（但不超过两个）

Responsive columns (but no more than two) with a fixed aspect ratio

html

css

viewport

multiple-columns

responsive-design