内容
- 观看此视频以伴随教程...
- 坚实的基础
- 不同的布局选项
- 浮点数
- 花车的好处
- 浮法问题
- 显示：表格单元
- 显示的好处：表格单元
- 显示问题：表格单元
- 文本对齐：对齐
- 文本对齐的好处：证明
- 文字对齐问题：调整
- 弹性盒
- Flexbox的好处
- Flexbox的问题
- 展望未来：网格模板布局
- 其他经验教训
- 框大小：border-box
- CSS3 calc函数
- JavaScript中的媒体查询
您已做出决定。您正在尝试。完成m点重定向，为不同设备分配单独的内容以及不断更新以修复新设备中损坏的内容的操作已完成。反应灵敏或崩溃。但是，在页面上出现第一行HTML和CSS后会发生什么？如果计划A不起作用怎么办？
我于2011年10月启动了我的第一个自适应网站，此后已启动了20多个网站。其中没有一个是按计划进行的。每个人都要求我知道两种（甚至三种）方法来完成手头的任务。拥有完整的工具带非常重要，因此让我们来看看您的计划B，C甚至D对您的自适应Web设计布局有何意义。
观看此视频以伴随教程...
坚实的基础
作为网络的读者，我相信您已经被告知很多次了，但是我强烈建议您阅读Ethan Marcotte关于响应式网络设计这一主题的绝妙书。他在70页上的解释要比我在2,000页上的解释更好。如果您对自适应设计的概念是陌生的还是模糊的，请快速浏览一下。所有良好的响应式设计均由以下三个基本部分组成：
- 灵活的网格
- 灵活的媒体
- 确定布局的媒体查询
不仅仅是真的很酷，还有一个很强的理由，那就是响应式设计是设计站点的最佳方法。那么，我们怎么知道？
Web使用正朝着移动化的方向发展。 Google希望网站具有响应能力。响应式重新设计可带来可观的收入和转化率，而且管理一个网站的内容比管理两个，三个或更多网站要简单得多。最终，响应式设计很棒。但是你知道的。因此，我们省去了一些细微之处，然后继续进行下去。
不同的布局选项
根据情况，可以使用一些强大的工具来对响应式设计进行编码。并非每种工具都适合每种情况，因此了解何时以及如何使用这些方法将真正改善您的网站。
浮点数
虽然我还有其他选择，但浮动广告仍然是我布置响应式网站的首选方法列表中的第一位。它们太简单了，并且可以在太多浏览器中使用，因此无法先在其他地方查找。
花车的好处
- 使换行内容非常容易
- 轻松将列的左侧和右侧与容器对齐
- 能够反转浮动项目的顺序 浮动：对 或者 向左飘浮
- 在所有浏览器中完全受支持
浮法问题
- 浮动元素不符合相对高度
- 需要clearfix CSS以保持内容流
- 仅为了调整对齐方式，就需要大量的CSS
总的来说，浮点数是要实现的最简单的响应式布局之一。他们永远在一起，我们都认识他们。但是在某些情况下，肯定会出现以下情况，需要使用其他布局方法：l您需要具有不同内容的多列具有相同的框高。 l内容在一行中时必须垂直居中。
我们将研究您可以使用的其他一些布局方法，以解决遇到的任何问题。
显示：表格单元
偶尔，您只需要垂直对齐某些内容。在其他情况下，一行中的每一列都必须具有相同的高度。这些情况正是表格未能完全离开我的布局工具箱的原因。 CSS使我们能够使用以下方法使一组元素成为表格 显示：表 和 显示：表格单元.
.parent {display：table; } .child {display：table-cell;垂直对齐：中间； }
这个方法很棒。即使是CSS表格，使用表格来布局内容也让我感到既肮脏又怀旧，但是如果您愿意忍受随之而来的小麻烦，那将非常方便。
显示的好处：表格单元
- 每列内容的高度均相同
- 垂直对齐：中间
- 在所有现代浏览器中完全受支持
显示问题：表格单元
- 与表格一样，单元格的宽度也是一个建议（它们会扩展到最宽内容的宽度）
- 你不能换行细胞
- 您可能需要添加额外的标记（父div与 显示：表)
如果使用正确， 显示：表格单元 修复了与使用浮动元素布置页面有关的许多问题。当然，在其他情况下，可能需要更独特的布局方法。
文本对齐：对齐
我们到过那里：客户想要一个布局，以在网格中对齐30个相同大小的块元素。也许是图片，视频或产品说明。他们还希望左右元素与上面的内容保持一致。
这是可行的，但是显示：table-cell不是一个选择，因为它不允许换行，并且在处理元素3n + 3、4n +的每个断点处的边距时，浮动元素需要几乎无法维护的CSS数量。 4、5n + 5，依此类推。
这种情况是为我量身定制的，该技术是我最初在Patrick Patrick撰写的题为Text-align：Justify and RWD的文章中读到的，它已成为我的布局工具箱的主要内容： 文本对齐：对齐 在网格上。这样做很简单，所有现代浏览器都很好地支持该代码，并且它创建的布局是可靠的。
.grid {text-align：justify; } .grid-item {display：inline-block;宽度：22.5％;文字对齐：左；垂直对齐：顶部；下边距：3.333333333333333％; } .grid-item ::之后{内容：’;;显示：inline-block;宽度：100％; } .grid-item-extra {display：inline-block;边界：0;边距：0; }
有一些与之相关的陷阱 显示：inlineblock。最大的问题是需要额外的标记。因为 文本对齐：对齐 将使最后一行中的最后一个网格项右对齐，该行中少于最大数量的任何元素都会在该行的空白处留出空白。添加额外的div来填充该行（带有一个 高度：0）解决了这个问题。这 ：：后 伪元素可确保网格项目的最后一行不是实际的最后一行，因此可以合理地证明网格项目的合理性。
Kunka在概述他的帖子中的过程方面做得很出色，因此，我建议您在有机会时进行检查。因此，总结一下：
文本对齐的好处：证明
- 元素之间没有计算余量
- 轻松包装长长的元素列表
- 左右对齐
- 在IE8 +和所有现代浏览器中受支持
文字对齐问题：调整
- 该技术需要额外的标记
- 印刷“问题”源于内联块
我还没有发现这些问题非常严重的情况，值得放弃这种布局技术。以原始标记的名义忽略它实在太强大了。对媒体查询内部的width和margin属性的简单更改会创建一些非常灵活的网格布局：
.grid-item {宽度：48％; } @media only屏幕和（min-width：48em）{.grid-item {width：31％; }} @media only屏幕和（最小宽度：64em）{.grid-item {宽度：22％; }} @media only屏幕和（最小宽度：80em）{.grid-item {宽度：12％; }}
到目前为止，我们已经涵盖了花车 显示：表格单元， 和 文本对齐：对齐。但是，尽管它们都是有用的，但在某些情况下它们还是会行不通的，因此通常很难确定这一点，除非您花了三个小时来尝试修复损坏的布局。现在有第四种布局方法可以与大多数浏览器兼容，这是我个人最喜欢的布局设计方法。
弹性盒
最近，埃里克·迈耶（Eric Meyer）发推文说：“让我这样说：无论您对CSS flexboxes感到多么兴奋，我都敢打赌，您的兴奋程度还远远不够。”我完全同意他的看法。每当我遇到另一个不确定的布局问题时，通常是基于Flexbox的解决方案，该解决方案具有“功能性”后备功能。
我将在此处介绍Flexbox，但这是Stephen Hay撰写的Flexbox精彩演练，因此请查看是否错过了它。
Flexbox的好处
- 一旦获得它，就很容易编写Flexbox的CSS
- 非常灵活你几乎可以做任何事
- 第一次，我们有了Flexbox真正的垂直和水平居中（保证金：自动)
Flexbox的问题
- 此时，您必须编写三种不同的语法，它们具有非常不同的功能集
- 截至目前，仅IE10 +，Chrome和Safari中支持（部分支持Firefox）
为了解决某些浏览器无法正确渲染Flexbox的问题，必须使用一个包括Modernizr以及至少上面概述的其他布局方法的后备计划。请记住，截至本文，Firefox中的Modernizr在Flexbox支持测试中返回false，因为它不支持 柔性包装，但团队正在寻求改变这一点。
展望未来：网格模板布局
尽管Flexbox既强大又强大，但它却为当今许多布局任务进行了过度设计。如果您要为博客或三栏首页寻找基本的响应式布局，那么动手掌握Flexbox的所有功能和复杂性可能就太多了。输入新的CSS3网格布局模板。
通过W3C运行的这个鲜为人知的模块现在没有实际的浏览器支持。 （对IE11的支持仅限于复杂而无趣的部分。）如果您在caniuse.com上查看其页面，则显示的绝大多数不支持的浏览器会有些令人气disc。但是，当它到达时，它将变得非常简单，特别是对于那些对视觉布局比对空代码布局更熟悉的设计师而言。
.header {流程：“ a”; } .main {flow：‘b’; } .sidebar {流程：“ c”; } .footer {flow：’d’; }正文{显示：“ a”，“ b”，“ c”，“ d”； } @media only屏幕和（最小宽度：48em）{正文{显示：“ aaa”，“ bbc”，“ ddd”； }}
对于新手前端开发人员而言，只需将“ bbb”的顺序更改为“ bbc”，即可很快轻松地更改页面的布局。那是真正的进步。
其他经验教训
有时，要使响应式设计正常工作，需要的不仅仅是良好的布局策略。在过去的几年中，我学到了一些技巧，这些技巧对我有很大帮助。当有人向我寻求帮助时，我总是对不知道这些相对简单的概念的人感到惊讶。如果您知道他们，那就太好了！忽略它们，将本文交给您的初级开发人员。如果您不认识他们，请阅读并假装您知道（以后可以感谢我）。
框大小：border-box
看看这个：
*， * ::之前， * ::之后{box-sizing：border-box; }
这个简单的规则一直支持到IE8（包括 -莫兹- 和 -webkit- 前缀）告诉浏览器计算元素的宽度（包括其边框和边框），而不仅仅是默认的内容。 宽度：50％ 是真的 50%，即使使用了填充和边框，也解决了许多开发人员在使用悬浮和边框浮动大小可变的元素时要处理的问题。
CSS3 calc函数
使用 calc（） CSS中的function是我最喜欢的响应技巧之一。 宽度：70％ 和 宽度：30％ 很简单，但是如果要在两列之一上设置静态宽度怎么办？
宽度：70％ 和 宽度：200像素 效果不尽如人意。那就是 calc（） 函数来了。此CSS函数使您能够使用两个不同单位的测量值来计算值。
例如：
.content {width：calc（100％-220px）; } .sidebar {width：200px; }
JavaScript中的媒体查询
如果您使用屏幕宽度触发JavaScript中的事件，并要求事件发生在与断点相同的宽度处， $（窗口）.width（） 或者 window.out宽度 众所周知，跨浏览器不准确且不一致。如果您尝试根据屏幕尺寸触发某些JavaScript，则无法轻松地依靠这些宽度，因为它们很少匹配用于媒体查询的CSS尺寸。如果您在媒体查询中使用em，则这些不一致情况会变得更糟。
现代浏览器和IE10 +为我们提供了 window.matchMedia（） 功能。它使用一个参数，即媒体查询，并将返回一个布尔值，该布尔值指示媒体查询是否匹配。如果您使用的是较旧的浏览器，Modernizr将提供可以以相同方式使用的.mq测试，但不会在IE9以外的版本中引起错误。
如果（window.matchMedia（“（最小宽度：48em）和（最大宽度：64em）”。matches））{/ * 48em视口宽度64em * /} else {/ * 48em>视口宽度或视口宽度> 64em * /}如果（Modernizr.mq（“（最小宽度：48em）和（最大宽度：64em）”））{...}
感谢您抽出宝贵的时间阅读本文。我真的希望它可以扩展您的自适应设计工具箱，或者至少可以增强您做得正确的事实。
字： 乔什·布罗顿（Josh Broton）
本文最初发表在《网络》杂志第250期上。
