内容
响应式网页设计听起来非常简单。为布局选择灵活的网格，使用灵活的媒体（图像，视频，iframe），并应用媒体查询来更新这些度量，以最佳地在任何视口上排列内容。在实践中，我们了解到这并不是那么容易。在每个项目中都会出现的微小问题使我们挠头，有时甚至在我们的办公桌上雕刻指甲沟。
自从我开始撰写《响应式设计周刊》通讯以来，我很幸运地与许多网络社区成员交谈并聆听了他们的经验。我想确切地找到社区真正想学习的内容，因此向读者分发了一份调查表。以下是最佳结果：
- 响应式图像
- 改善表现
- 响应式排版
- JavaScript中的媒体查询
- 渐进增强
- 布局
考虑到这些主题，我进行了一系列播客，向我们的一些行业领导者征求他们的想法。在他们的回答中，有一点是一致的：在开始担心令人兴奋和先进的技术之前，请集中精力正确掌握基础知识。通过将事情归结为基础，我们能够为每个人构建一个健壮的界面，并在设备或用户上下文允许的情况下分层构建功能。
‘那么……这些高级技术呢？’我听到你问。我认为斯蒂芬·海伊（Stephen Hay）总结时说得最好：‘终极的RWD技术是从不使用任何高级RWD技术开始的。从结构化内容开始，然后逐步发展。仅在设计中断且内容要求时才添加断点，仅此而已。’
在本文中，我将从基础知识入手，并在情况允许的情况下增加复杂性，以增强这些高级技术。让我们开始吧。
响应式图像
流体介质是由Ethan Marcotte最初定义的RWD的关键部分。宽度：100％; ，最大宽度：100％；仍然可以在今天使用，但是自适应图像的前景变得更加复杂。随着屏幕尺寸，像素密度和支持设备数量的增加，我们渴望获得更好的控制。
响应图像社区组（RICG）定义了三个主要问题：
- 我们通过网络发送的图像的千字节大小
- 我们要发送到高DPI设备的图像的物理尺寸
- 针对特定视口大小以艺术指导的形式进行图像裁剪
Yoav Weiss在Indiegogo的帮助下完成了Blink实施的大部分工作-Google的WebKit分支，到您阅读此书时，它将在Chrome和Firefox中交付。 Safari 8将发布srcset，但是sizes属性仅在每晚构建中，并且picture>尚未实现。
随着我们的Web开发过程中任何新事物的到来，可能很难上手。让我们逐步进行一个示例。
img！-为所有不支持图片的浏览器声明备用图像-> src =“ horse-350.webp”！-在srcset中声明所有图像大小。使用w描述符包含图像宽度，以通知浏览器每个图像的宽度。-> srcset =“ horse-350.webp 350w，horse-500.webp 500w，horse-1024.webp 1024w，horse.webp 2000w “！-大小会通知浏览器我们的网站布局。这里我们说的是对于64ems及更大的视口，请使用将占据视口70％的图像-> size =“（最小宽度：64em）70vw，！-如果视口不是那样大，那么对于37.5ems和更大的任何视口，请使用占视口95％的图像->（最小宽度：37.5em）95vw，！-如果视口小于该视口，则使用占据视口100％的图像-> 100vw“！-始终具有替代文本。-> alt =” A horse“ />
从性能的角度来看，在sizes属性中使用min-width还是max-width并不重要-但是源顺序很重要。浏览器将始终使用第一个匹配大小。
另外，请记住，我们正在硬编码sizes属性以直接针对我们的设计进行定义。这可能会导致问题向前发展。例如，如果您重新设计网站，则需要重新访问所有img>或picture>并重新定义大小。如果您使用的是CMS，则可以在构建过程中解决此问题。
WordPress已经有一个插件可以提供帮助。它在WP标准图像品种上定义了srcset，并允许您在中心位置声明尺寸。从数据库生成页面时，它将交换出img>上的所有提及，并用图片标记替换它们。
基本的
- 考虑一下您是否真的需要包含图像。图像的核心内容还是装饰性的？少一张图像就意味着更快的加载时间
- 使用ImageOptim优化需要包含的图像
- 为服务器或.htaccess文件上的图片设置过期标题（请参见“性能”下的详细信息）
- PictureFill为图片提供polyfill支持
先进的
- 使用jQuery的“延迟加载”插件延迟加载图片
- 使用HTMLImageElement.Sizes和HTMLPictureElement进行特征检测。
- Github上的高级PictureFill WP插件可让您定义自定义图像的宽度和尺寸值
表现
为了在页面上获得最快的感知性能，我们需要在服务器的第一次响应内呈现页面顶部所需的所有HTML和CSS。该魔术数字为14kb，并且基于第一个往返时间（RTT）内的最大拥塞窗口大小。
Guardian的前端技术主管Patrick Hamann和他的团队使用前端和后端技术的组合设法突破了1000ms的障碍。 Guardian的方法是确保将所需的内容（文章）尽快交付给用户，并在14kb的幻数之内。
让我们看一下过程：
- 用户单击Google指向新闻报道的链接
- 将单个阻止请求发送到商品的数据库。不需要相关的故事或评论
- 加载的HTML包含关键CSS
- 在头>
- 进行“切芥末”过程，并加载基于用户设备功能的所有条件元素
- 与文章本身有关或支持文章本身的任何内容（相关文章图像，文章评论等）都被延迟加载到位
像这样优化关键渲染路径意味着head>长222行。但是，gzip压缩后，用户看到的关键内容仍在14kb的初始有效载荷之内。这个过程有助于突破1000毫秒的渲染障碍。
有条件和延迟加载
有条件的加载可根据用户的设备功能来改善其使用体验。诸如Modernizr之类的工具可让您测试这些功能，但请注意，仅仅是因为浏览器表示其提供了支持，并不总是意味着完全支持。
一种技术是推迟加载某些内容，直到用户显示使用该功能的意图。这将被认为是有条件的。您可以推迟加载社交图标，直到用户将鼠标悬停或触摸图标为止，或者可以避免在较小的视口上加载iframe Google Map，而用户可能更喜欢链接到专用的地图应用程序。另一种方法是“切芥末” –有关详细信息，请参见上面的Boxout。
延迟加载是指您始终打算在页面上加载的内容-图片是文章，评论或其他相关文章的一部分-但用户不需要在那里就可以开始使用内容。
基本的
- 为文件启用gzip压缩，并为所有静态内容（netm.ag/expire-260）设置到期标头
- 使用延迟加载jQuery插件。当接近视口时或经过一定时间后，这会加载图像
先进的
- 快速设置或CloudFlare。内容交付网络（CDN）可以比您自己的服务器更快地将静态内容交付给用户，并且具有一些免费套餐
- 为启用HTTP2的浏览器启用SPDY以利用诸如并行http请求之类的http2功能
- 社交计数允许有条件地加载您的社交图标
- 使用静态地图API，您可以切换出图像的交互式Google地图。在netm.ag/static-260上查看Brad Frost的示例
- Ajax包含模式将从data-before，data-after或data-replace属性加载内容片段
响应式排版
印刷术是要使您的内容易于消化。响应式排版扩展了此功能，以确保在各种设备和视口中的可读性。乔丹·摩尔（Jordan Moore）承认，这种类型是他不愿意让步的一件事。如果需要，可以放一两张图像，但要确保类型合适。
Stephen Hay建议将HTML字体大小设置为100％（阅读：保留原样），因为每个浏览器或设备制造商都会为特定的分辨率或设备设置合理的可读性默认值。对于大多数台式机浏览器，该值为16像素。
另一方面，Moore使用REM单位和HTML字体大小来设置某些内容元素的最小字体大小。例如，如果您希望文章的下划线始终为14px，则将其设置为HTML元素上的基本字体大小，然后设置.byline {font-size：1rem;}。在缩放正文时：font-size：适应视口，您将不会影响.by-line样式。
良好的阅读线长度也很重要-瞄准45至65个字符。您可以使用一个小书签来检查您的内容。如果您的设计支持多种语言，则行长也可能会有所不同。摩尔建议使用：lang（de）文章{max-width：30em}掩盖那里的所有问题。
要保持垂直节奏，请将内容块ul>，ol>，blockquote>，table>，blockquote>等的边距设置为与行高相同。如果节奏由于引入图像而中断，则可以通过添加Baseline.js或BaselineAlign.js来解决。
基本的
- 字体基于100％的正文
- 在相对单位中工作
- 将边距设置为线条高度，以保持设计中的垂直节奏
先进的
- 使用Enhance.js或延迟字体加载来提高字体加载性能
- 使用Sass @includes作为语义标题。
- 通常，我们需要在需要h2标记的侧边栏小部件中使用h5样式。使用Bearded的Typography Mixins来控制字号，并通过以下代码保持语义：
.sidebar h2 {@include heading-5}
JavaScript中的媒体查询
自从我们能够通过媒体查询在各种视口中控制布局以来，我们一直在寻找一种方法来将其与运行JavaScript结合起来。有几种方法可以在某些视口的宽度，高度和方向上触发JavaScript，并且一些聪明的人编写了一些易于使用的本机JS插件，例如Enquire.js和Simple State Manager。您甚至可以使用matchMedia自己构建它。但是，您有一个问题，需要在CSS和JavaScript中复制媒体查询。
亚伦·古斯塔夫森（Aaron Gustafson）有个巧妙的窍门，这意味着您不必在CSS和JS中管理和匹配媒体查询。这个想法最初来自杰里米·基思（Jeremy Keith），在本例中，古斯塔夫森（Gustafson）将其付诸实施。
使用getActiveMQ（netm.ag/media-260），在body元素的末尾插入div＃getActiveMQ-watcher并将其隐藏。然后在CSS集中将＃getActiveMQ-watcher {font-family：break-0;}设置为第一个媒体查询，font-family：break-1;第二个，font-family：break-2;到第三等等。
该脚本使用watchResize（）（netm.ag/resize-260）检查视口的大小是否已更改，然后读取活动的字体家族。现在，您可以使用它来挂钩JS增强功能，例如在视口允许时将选项卡式界面添加到dl>，更改灯箱的行为或更新数据表的布局。在netm.ag/active-260上查看getActiveMQ Codepen。
基本的
- 忘了使用不同视口的JavaScript。以用户可以跨所有视口访问内容和网站的方式为其提供内容和网站功能。我们永远不需要JavaScript
先进的
- 通过将Breakup用作媒体查询的预定义列表并自动为getActiveMQ-watcher创建字体系列列表，从而扩展Gustafson的方法
渐进增强
关于渐进增强的一个常见误解是人们认为，“哦，我不能使用此新功能”，但实际上，情况恰恰相反。渐进增强功能意味着您仅在一个或什至没有浏览器中就可以支持某项功能，随着时间的推移，随着新版本的到来，人们将获得更好的体验。
如果您查看任何网站的核心功能，则可以将其作为HTML交付，并由服务器端进行所有处理。付款，表格，点赞，共享，电子邮件，仪表板–都可以完成。一旦完成了基本任务，我们就可以在此基础上构建出色的技术，因为我们有一个安全网来捕获那些失败的技术。我们在这里讨论的大多数高级方法都是基于渐进增强的。
布局
灵活的布局很简单，但是它有许多不同的方法。使用：nth-child（）选择器创建标记较少的简单网格布局。
/ *声明网格的移动优先宽度 * / .grid-1-4 {float：left;宽度：100％; } / *当视口至少为37.5em时，然后将网格设置为每个元素50％ * / @media（最小宽度：37.5em）{.grid-1-4 {宽度：50％; } / *在第一个元素之后的第二个元素中清除浮点数。 * / .grid-1-4：nth-of-type（2n + 1）{clear：left; }} @media（最小宽度：64em）{.grid-1-4 {宽度：25％; } / *删除以前的clear * / .grid-1-4：nth-of-type（2n + 1）{clear：none; } / *在第一个元素之后的第四个元素中清除浮点数。 * / .grid-1-4：nth-of-type（4n + 1）{clear：left; }}
挥手告别，为您的布局使用位置和浮动。到目前为止，尽管它们为我们提供了很好的服务，但将其用于布局一直是一个必不可少的技巧。现在，我们有了两个新的孩子，这将帮助解决我们所有的布局问题– Flexbox和Grids。
Flexbox非常适合单个模块，可以控制每个模块中内容的布局。我们尝试提供的布局可以使用Flexbox轻松实现，而响应式站点则更是如此。有关更多信息，请参阅CSS Tricks的Flexbox指南或Flexbox Polyfill。
CSS网格布局
网格更适合宏级别的布局。网格布局模块为您提供了一种在CSS中描述布局的好方法。虽然目前仍处于草稿阶段，但我还是建议Rachel Andrew在CSS Grid布局上发表这篇文章。
最后
这些只是扩展您的响应式实践的一些技巧。在进行任何新的响应式工作时，请退后一步并确保您掌握了正确的基础知识。从您的内容，HTML开始，并在其上获得改进的体验，并且可以无限地进行设计。
本文最初出现在第260期 网络杂志.
