web 响应式布局_表布局在响应式Web设计中的作用

web 响应式布局

流畅的布局是在任何视口大小下容纳我们的内容的理想方式。 文本可以随着容器的增长和收缩而流动，图像甚至视频和iframe也可以弯曲和压缩。 但是，如果我们拥有不应更改尺寸的内容该怎么办？ 例如，通常设计时考虑到非常具体的尺寸的广告块呢？ 奇怪的是，这是要抢救表格布局的地方。

最近在阅读Tim Kadlec的《 实现响应式设计》时，我被提醒了这一点。 也正是在适当的时候。 我当时正处于一个客户项目的中间，该项目只需要这种方法（而我忙于屠宰）。

---

网络广告

许多网站依靠广告收入。 无论您多么不喜欢网络营销图像，如果没有它，您将无法访问习惯的大量免费内容。 例如，Tuts +部分依靠广告收入来维持其不断壮大的作家和员工团队。

互动广告局 （iab）负责大量的数字广告，并努力为整个行业定义标准和指南。 请参阅其展示广告指南 ，以获取有关他们推荐的通用广告块尺寸的参考：

中矩形广告300x250像素

矩形180x150px

宽幅摩天大楼160x600px

页首横幅728x90px

四个固定尺寸的图像。 同样重要的是，它们也必须保持在这些尺寸上。 如果将徽标，带状线和免责声明压缩为流畅的布局，则它们都将变得无法识别或难以辨认。 同样，为这些广告付费的公司也根据区块的大小和位置来付费。 如果广告尺寸较小，则300x250像素的广告可能不会那么突出或有效，从而缩短了相关公司的名称。

广告是按固定尺寸显示的 ，因此，在我们找到更好的自适应广告解决方案之前，最好尊重这一点。

---

流体布局

让我们快速构建一个通用的流体布局以演示我们的问题。 <section> ，其中包含<article>和<aside> 。 我们所需要的：

<section>
	<aside>
	
		<!--here's our ad block-->
	
	</aside>
	<article>
	
		<!--here's a load of content-->
	
	</article>
</section>

然后，我们可以将其样式设置为：

section {
	width: 90%;
	margin: 0 auto;
}

aside {
	width: 30%;
	float: left;
}

article {
	width: 65%;
	float: right;
}

img {
	max-width: 100%;
}

添加一些颜色，您将获得以下效果：

通过我们的img {max-width: 100%}规则，我们确保了图像是流畅的，并且不会从其父容器中爆发出来。 可悲的是，我们的流体旁比图像的300px宽度要窄，这正是我们不希望发生的情况。

---

混合布局

让我们固定一旁的宽度，让文章进行弯曲。 作为固定和流体的组合，我们将此布局类型称为Hybrid 。

section {
	width: 90%;
	margin: 0 auto;
}

aside {
	width: 300px;
	float: left;
}

article {
	width: 65%;
	float: right;
}

img {
	max-width: 100%;
}

这可以在更宽的屏幕上使用，但是一旦容器变得太小，即：当300px大于容器宽度的35％时，商品将被推到下面：

我们可以通过切换标记来解决此问题； 放置一旁的文章 ：

<section>
	<article>
		<aside>
		
			<!--here's our ad block-->
		
		</aside>
	
		<!--here's a load of content-->
	
	</article>
</section>

然后从商品上删除宽度和浮标，最后在一边留出一定的余量以充当装订线：

section {
	width: 90%;
	margin: 0 auto;
}

aside {
	width: 300px;
	float: left;
	margin-right: 5%;
}

article {
}

img {
	max-width: 100%;
}

这是我们得到的：

哪一个完美！ 文章内容是流畅的，而广告块及其父元素是固定宽度！ 您甚至可以通过将float换为float: right并将装订线（其边距）也放在另一侧，将一旁移到右侧。

但是，当文章内容开始占据比旁边更多的垂直空间时，就会出现问题。 结果如下：

有一些技巧可以避免这种情况。 我们可以在一边留出大量的底部填充，然后再留出同样大量的负底边距。 然后overflow: hidden我们人为地延长了一边，隐藏了所有伸出的东西。

或者，我们可以使用定位并固定在文章右上方的一侧，为文章留出一定的填充空间。

这些都不是理想的，每个都呈现自己的独特问题。

---

输入表格布局

什么？！ 我听你说...

那就对了。 表格布局（上帝安息了）实际上很擅长安排混合布局，因此让我们从他们的书中摘下一片叶子。 使用CSS，我们可以将元素显示为表格的组成部分。 这也是绝对可以的。 我们没有在标记中使用实际的表 （这很糟糕，因为我们不使用表格数据。） 我们只是出于显示目的而依赖表， 而无需更改文档的语义 。

回到我们的原始布局（旁边和文章并排），我们可以更改CSS来建议类似表格的构建块。 我们的包含部分成为表格，文章和旁边变成其中的表格单元：

section {
	display: table;
	width: 90%;
	margin: 0 auto;
}

aside {
	display: table-cell;
	width: 300px;
}

article {
	display: table-cell;
}

img {
	max-width: 100%;
}

这给了我们：

嗯，不太正确。 我们需要更改单元格的垂直对齐方式，因为此处的图像和文本都位于同一基线上。

aside {
	display: table-cell;
	vertical-align: top;
	width: 300px;
}

article {
	display: table-cell;
	vertical-align: top;
}

现在，只要文章或旁边的东西垂直生长，其他物品也随之增加。 不过，这种安排确实取决于DOM； 无论哪个表格单元格元素首先出现在文档中，也首先出现在表格布局的左侧（左侧）。

当然，我们也可以将其全部包装在媒体查询中，以便仅在较大的屏幕上显示该布局。 在较小的屏幕上，一旁会整齐地放在文章顶部。 观看演示以了解其行为。

---

支持

所有现代浏览器均支持使用CSS表显示，但是Internet Explorer仅在IE8版本中采用了CSS表显示。

因此，对于较早的浏览器，明智的是有条件地包括一个后备样式表，该表为您提供了一种替代的布局解决方案：

<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->

（或者您可以忽略IE7及以下版本...）

正如Tim在书中提到的那样，Windows 7手机也将以我们刚刚设置的ie.css样式加载。 为了防止这种情况的发生，您需要更改条件：

<!--[if lt IE 8 & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->

---

结论

因此，我们有了它-谁会想到表布局在这个响应式Web设计时代可以为您提供帮助？ 诚然，这并不是您所希望的完美解决方案，但是在CSS Grid Layout和Flexbox受到更多关注之前，这是一个不错的选择。

翻译自: https://webdesign.tutsplus.com/tutorials/the-role-of-table-layouts-in-responsive-web-design--webdesign-10294

web 响应式布局