《响应式Web设计实践》一2.4 混合固定宽度和流动宽度

本节书摘来异步社区《响应式Web设计实践》一书中的第2章，第2.4节，作者： 【美】Tim Kadlec 译者： 侯鸿儒 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 混合固定宽度和流动宽度

响应式Web设计实践
到目前为止，文章页面看起来已经很不错了，而且布局十分灵活，下面让我们来加强一下右侧的边栏。现在它看起来好像没什么问题，但是如果我们能让它保持300px宽，而只让主体列流动岂不是更好？虽然这不是必需的，但是考虑到边栏里的广告，我想这将会是一次很好的润色。

使用浮动来实现这个任务几乎是不可能的。正如我们之前讨论过的那样，主要内容栏的宽度依赖于屏幕的分辨率，如果我将边栏设置为固定的300px宽，同时保持主要内容栏为当前的63.125%，那么我们将遇到前面在浏览器宽度小于960px时遇到的同样的问题。

有一种方法可以绕过这个问题，其中会涉及CSS表格。

表格布局——正确的方法
不久以前，在一个离我们不太遥远的星球，那里多数的Web站点都是使用表格来布局的。那是一种缺乏语义的、散乱到让人看了想哭的实现方法，但它的确是有效的。后来那里出现了一场Web标准化运动，并提出了要将内容和表现相分离的理念，突出强调了使用语义标记的重要性。一场伟大的战役便随之而来，并最终以标准的获胜而告终。

相比CSS布局，表格布局的优势之一在于它简化了将站点布局为多列的实现过程。可以混合使用固定宽度和流动宽度；一行里可以包括好几列——所有这些在表格布局中实现起来都相当容易，而用CSS来实现这些样式则远没有那么简单。

其实你可以给display属性赋予许多不同的、与表格相关的值，并以此来实现上述的那些样式，因为display的一些属性值可以让元素获得与表格相关元素相似的布局效果。

如果在CSS中使用表格值的做法会让你觉得不爽，那么我想你不该因此而受到指责。毕竟，基于表格（table）的布局曾一度受到了人们猛烈的抨击，你也许非常理解那种甚至看到厨房里的桌子（table）都会感到恶心的感受。但是，在CSS中使用表格值与使用HTML表格来布局还是有很大区别的，CSS中的表格值只是给内容定义了视觉样式，而并不是说表格也是内容的一部分。

到目前为止，display属性的表格值还没有得到广泛的使用。对此你也许可以指责IE，因为Firefox、Safari以及Opera都已经支持表格值有一段时间了，而IE直到IE 8才开始支持表格值。在写这本书时，IE 6和IE 7总共的市场份额已经下降到了5%以下，所以我想现在是时候扫扫CSS表格值身上的尘土，并开始使用它们了，更何况移动平台对此的支持也相当棒。

如果将某列的display属性指定为table-cell，我们就可以混合分别使用固定宽度和流动宽度的列了：

.main {

 display:table-cell;

aside {

 display:table-cell;

 width: 300px; 

这时当我们再来缩放浏览器，边栏将仍旧保持300px，而左边的主要内容栏则会进行调整以填满剩余区域。虽然现在两列之间没有了漂亮的间隔，但我们可以很容易地通过增加一些padding来让它重现：

.main {

 display:table-cell;

 padding-right: 2.5316456%; /* 24px / 948px */

现在，我们已经能够将固定宽度的列和流动宽度的列结合在一起使用了，这使得我们在保证布局灵活性的同时，不必再去担心在混合布局中引入浮动时会造成的混乱了（图2.7）。但主要内容栏在高分辨率的屏幕中显示时还是会有一些不妥之处（译者注：因为在高分辨率屏幕下主要内容栏会变得很宽，过宽的行不利于人们阅读），我们将在下一章探索媒介查询时再去解决这个问题。

对老版本IE的支持
对于很多站点来说，也许本章到此就可以结束了，因为IE 8之前的各种版本的IE正在迅速失去各自的市场份额。其实这仍然是由你的用户来决定的，让那些旧版本的IE以它们现有的方式来呈现网站也许是不够的。虽然可以显示网站的内容，但你的客户也许并不满足于这样的设计，这时你就要准备一些备用的
样式了。

条件注释可以帮你达到上面的目标，因为条件注释能让特定版本的IE浏览器使用另外的样式表。例如，我们创建一个叫做ie.css的样式表，并且规定只在IE 7及以下版本的IE中才加载它，那我们就可以使用下面这样的条件注释：

 !--[if lt IE 8] 

 link rel="stylesheet" href="/css/ie.css" media="all" 

 ![endif]-- 

现在，任何IE 8之前版本的IE就都会加载ie.css了。这样，我们便实现了为较早版本的IE浏览器提供备选样式表的目标。

Display:table的告诫以及未来
在你变得兴奋并开始在所有项目中都使用display:table之前，这里有一些你需要意识到的潜在问题 。

第一个问题是：在一个被指定为display:table-cell的元素内，你无法精确地定位元素。如果你需要精确地定位，你就不得不在表格中插入另外一个div，或者干脆就不要使用display:table。

另一个需要牢记的一点是：相对来说，表格是更加严格的。有时浮动所具有的流动性是有利的，比如如果有些内容过长的话，那么浮动可以很容易地让超出的部分折回到下面去。

Web设计中没有银弹（译者注：银弹是指那些可以解决复杂而棘手的问题的方法或者技术手段），你会看到我在后面还会提到这句话的。所以你必须在提交任何方案之前，仔细考虑你的需求，包括使用display:table。

CSS网格布局和Flexbox是两种新的布局方法，它们可以为我们提供更多种类的控制，而且值得我们关注。但现在浏览器对它们的支持还都非常有限，这也是我们使用display:table的原因。

现在唯一的问题是Windows Phone 7也会加载这个备用样式，鉴于此，我们将在下一章中利用媒介查询来针对小屏幕修改样式表，因为我们不想在手机中让备用的样式表覆盖现有的样式。幸好我们只需在条件注释中做一处小小的修改，就可以修复这个问题了（该方法最先由Jeremy Keith提出）：

 !--[if (lt IE 8) amp; (!IEMobile)] 

 link rel="stylesheet" href="/css/ie.css" media="all" 

 ![endif]-- 

既然我们可以在不影响手机体验的前提下提供备选样式，那么我们就先将ie.css文件中的样式变回两列浮动的流动布局：

.main {

 float: left;

 width: 65.8227848%; /* 624/948 */

aside {

 float: right;

 width: 31.6455696%; /* 300/948 */

虽然在老版本IE中达不到那些对标准支持更好的浏览器中显示时的效果，但这已经足够了。记住，站点不需要在不同设备的不同浏览器中看起来都一模一样，事实上这也是无法做到的。即便是现在这样，那些老版本IE的用户也照样可以看到一个对于他们的浏览器来说合适且良好的布局。

提示
可以访问http://implementingres-ponsivedesign.com/ex/ch2/ch2.4.html来查看实际效果。

下一代响应式Web设计：组件驱动式Web设计 自从著名设计师 Ethan Marcotte（@beep）在 A List Apart上发表了一篇名为《 Responsive Web Design》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特
推荐这几个流程图设计器web开发方案 前沿：一个流程图设计器需要什么？一个是图的绘制能力、基于svg或者canvas来绘制各种形状的节点（矩形、圆形、多边形）以及线，一个是图与图之间的交互包括拖拽，节点之间的连线等，最后是画布面板的便捷性，其中包括：比如ps中的网格功能、对其线、步骤回撤、画布的可伸缩、快捷按钮等等，那前端社区有啥开源解决方案，方便我们快速开发一个属于自己的流程图设计器？
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。