text.html

 
<p class="zw">当我们使用CSS多列布局时，可以改变列的数量和宽度来适应不同的屏幕宽度和屏幕方向，这是一件非常简单的事情。我们可以通过两种方式来实现：第一种是定义列的数量；第二种是指定列的宽度。</p> 
<p class="zw">首先，我们要重写Get Hardboiled网站文章的HTML结构，移除这些表现型的区块，只在<code>section</code>元素中留下结构化的内容。</p> 
<pre class="代码无行号"><code><section> 
<p>Raymond Thornton Chandler was an American novelist and screenwriter. In 1932, at age forty-four, Chandler decided to become a detective fiction writer after losing his job as an oil company executive during the Great Depression. His first short
story, 'Blackmailers Don't Shoot', was published in 1933 in Black Mask, a popular pulp magazine. His first novel, 'The Big Sleep', was published in 1939. In addition to his short stories, Chandler published seven novels during his lifetime (an eighth in progress at his death was completed by Robert B. Parker). All but Playback have been made into motion pictures, some several times. In the year before he died, he was elected president of the Mystery Writers of America.</p> 
</section></code></pre> 
<p class="zw">并不需要在标记里划分区块，因为我们现在可以用样式表替代这些工作。首先我们用<code>column-width</code>属性来指定列的宽度，使用包括像素在内的多个单位，但我更喜欢用与文字大小相关的<code>rem</code>来描述列的宽度。</p> 
<pre class="代码无行号"><code>section { 
column-width : 32rem; }</code></pre> 
<p class="图"><img alt="2003.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/259.jpg"></p> 
<p class="图题">如果父级元素变宽，浏览器将会添加新列。当父级元素缩小时，浏览器将会每次删除一列，同时重绘文本来适应布局。</p> 
<p class="zw">我选择了<code>32rem</code>，是因为对于1.6rem的文字大小，它可以提供一个阅读起来很舒适的行的长度，每列大概有45到75个字符。在小屏幕上，浏览器将仅有一列。当屏幕宽度足以显示多个<code>32rem</code>宽的列时，浏览器将会动态地显示前两个、三个，甚至更多的列。</p> 
<blockquote class="提示 editing-block"> 
 <h3 class="sigil_not_in_toc">浏览器私有前缀</h3> 
 <p class="zw">Firefox 和 WebKit都通过它们的私有前缀实现了CSS的多列布局，因此需要加上这些前缀。下面是W3C的官方语法。</p> 
 <pre class="代码无行号"><code>section { 
-moz-column-width : 32rem; 
-webkit-column-width : 32rem; 
column-width : 32rem; }</code></pre> 
 <p class="zw">在写本章的时候，Microsoft Edge、Opera Mini以及iOS和Mac OS上的Safari浏览器都已经实现了无前缀的CSS多列布局。</p> 
</blockquote> 
<h3 class="sigil_not_in_toc" id="nav_point_317">列数</h3> 
<p class="zw">我能想到一些需要指定列的数量而不是列的宽度的设计场景，这种情况下我们将使用<code>column-count</code>属性。</p> 
<p class="zw">对于小屏幕来说，内容区域只需要显示一列。我们并不需要特意指定，因为浏览器将会自动这样显示。由于在中型或大屏幕上使用多列布局更有意义，因此我们把<code>column-count</code>声明写在媒体查询中。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
section { 
column-count : 2; } 
}</code></pre> 
<p class="zw">当浏览器的宽度大于<code>48rem</code>时，文本将会排成两列。同样的，当我们需要三列时，我们将使用下一条声明，并将媒体查询的最小宽度设置得更大一些。</p> 
<pre class="代码无行号"><code>@media (min-width: 64rem) { 
section { 
column-count : 3; } 
}</code></pre> 
<p class="图"><img alt="2004.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/260.jpg"></p> 
<p class="图题">响应式布局中，这些列的宽度会有所不同，以适应不同宽度的父容器，但是列的数量会保持不变。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_318">列的简写方式</h3> 
<p class="zw">由于<code>column-width</code>和<code>column-count</code>两个属性并不重叠和冲突，我们可以把两个<code>columns</code>属性合并成一条更短的声明，就像这样。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
section { 
columns: 32rem 2; } 
}</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_319">列间距</h3> 
<p class="zw">留白是提高可读性的重要因素，列与列的间距有助于定义不同的阅读区块。我们将在列之间插入间距，可以使用像素来指定间距的大小，但在响应式设计中，使用更加灵活的单位<code>rem</code>会更好一些。我们将间距定义为<code>4rem</code>宽。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
section { 
column-gap : 4rem; } 
}</code></pre> 
<p class="zw">为了让设计可以根据用户正在使用的屏幕灵活变化，我们会在大尺寸屏幕上增加列与列的间距。</p> 
<pre class="代码无行号"><code>@media (min-width: 64rem) { 
section { 
column-gap : 6rem; } 
}</code></pre> 
<p class="图"><img alt="2005.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/261.jpg"></p> 
<p class="图题">一个好的响应式设计不仅仅是自适应布局，它还包括对很多元素做一些微小的变化，以便更好的适应用户的屏幕。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_320">列分割线</h3> 
<p class="zw">在Web设计中，横向分割线非常重要，它本身有个元素标签——<code>hr</code>。但垂直分割线也同样重要。虽然垂直分割线并没有自己的HTML元素，但它拥有CSS多列属性，我们将指定<code>column-rule</code>的宽度，并使用像素来定义。</p> 
<pre class="代码无行号"><code>section { 
column-rule-width : 2px; }</code></pre> 
<p class="zw">我也经常要在响应式临界点增加列规则的宽度。在更宽的屏幕上，让列分割线的宽度变得更大。</p> 
<pre class="代码无行号"><code>@media (min-width: 64rem) { 
section { 
column-rule-width : 3px; } 
}</code></pre> 
<p class="zw">当然，我们也可以指定列分割线的颜色。</p> 
<pre class="代码无行号"><code>section { 
column-rule-color : #ebf4f6; }</code></pre> 
<p class="zw">最后，我们可以定义列分割线的样式。主要的样式有虚线、点状虚线和实线，但你也可以使用其他任何<code>border-style</code>的值。你如果知道<code>groove</code>、<code>ridge inset</code> 和<code>outset</code>四个值也是可用的，一定会很兴奋。</p> 
<pre class="代码无行号"><code>section { 
column-rule-style : solid; }</code></pre> 
<p class="图"><img alt="2006.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/262.jpg"></p> 
<p class="图题">CSS列实现起来快速、简便，并且现代浏览器对其有很好的支持。</p>