响应式设计今年8岁了，为了庆祝，我们向网络行业的专家们提出了一个简单的问题：2018年，响应式设计对你和你的工作意味着什么？我被他们的答案迷住了。正如许多人所说的那样，响应式设计的技术方面——灵活的网格、灵活的媒体和媒体查询——在八年前已经或多或少地被人们所理解。但是这些关于CSS的简单想法仍然具有深远的影响，其影响远远超出了代码。下面，您将了解响应式设计对个人、团队和整个组织如何工作和思考的影响。既然我们的内容能够响应性地适应新的和不同的环境，我们应该如何建模我们的内容呢？我们到底应该如何对响应式设计进行原型设计和测试？如何构建我们的团队和工作流程，以更好地完成这种新的工作？不过，最重要的是始终关注用户。无论他们谈论的是触摸友好型的目标尺寸、响应式设计而无需宽度规则或针对传统电子邮件客户端的媒体查询，还是（不断重复）优化大型资源（如图像）以实现响应式交付的重要性，这里的目标都是关于用户需求的。当我们进行响应式设计时，我们的关注点会发生变化：从在屏幕上固定的一组像素上工作，到构建灵活的系统，以满足尽可能多的不同用户的需求，在尽可能多的不同环境中。我希望你和我一样喜欢阅读这些内容。接下来的八年里，我们要积极思考。Orde Saunders，顾问网站管理员，十年城。响应式设计的目标始终是适应呈现它的媒体。因此，要想有一个成功的响应式网站，你需要在发展网络的优势在于它的覆盖面和多样性——你的用户可以是任何人，从任何地方和各种设备上查看你的网站。为了确保最佳的用户体验，您必须以适合他们独特需求的方式提供内容。由于试图预测每一个可能的用例是不实际的，我们定义了一组规则，浏览器可以查询这些规则来查看它在给定的情况下应该如何响应形势。让我们来看一个简单的例子，说明这在实践中是如何工作的。在本例中，我们设置了一个合理的默认基线，并添加了媒体查询，以定义对大字体和单色图像的响应方式显示：复制到剪贴板/*基线。*/身体{字号：100%；颜色：暗灰色；背景色：白烟；}/*大型显示器。*/@介质（最小宽度：48em）{身体{字号：125%；}}/*单色显示器。*/@媒体（单色）{身体{颜色：黑色；背景色：白色；}}我们现在可以为任何用户提供这组规则，他们的浏览器可以以它认为最合适的方式响应。通过构建一个以结果为中心的模块化系统，我们能够满足我们网站所处的各种情况访问过。就像所有好的设计，响应式设计都是以用户为中心的设计。proteusthemes的前端开发人员Marko Prelec可以使用非常不同的设备访问我们今天创建的网站，从手机和平板电脑上的小屏幕，到笔记本电脑上越来越大的屏幕，再到电视机。一个网站如何能在所有这些设备上工作，同时又能保持良好的外观，这将是一个无法抗拒的想法。响应式网页设计解决了这个问题。我总是建议从最小的设备到最大的设备开始考虑响应式网页设计，这就是所谓的"移动优先方法"。移动显示器上没有太多空间，因此这种方法迫使你只添加最重要的内容。这是一个很好的过程，以避免臃肿的设计，并确保你的网站运行更顺利和快一点。一次你的设计完成了，在家里所有的设备上测试一下。最常见的错误是移动字体太小，这是只有在实际设备上测试时才能看到的。在这种情况下，CSS媒体查询是您最好的朋友，因为您可以控制将哪些样式用于特定的屏幕宽度。你可以很容易地增加字体为较小的设备，仍然保持相同的大小在所有其他的设备。流体图像和视频对于快速响应的网页设计也很重要。你不想在手机屏幕上只看到图像的一部分。图像应该根据用户的可用视口缩小。最后但并非最不重要的是，不要忘记优化这些图像，因为这样可以减少带宽使用，并为用户节省大量的移动数据计划费用。justinavdich是厚脸皮猴mediasresponsiveweb开发公司的生产主管，他很少是现代网站的事后诸葛亮；这是必须的。在当今移动优先发展的时代，拥有一个响应迅速的网站对用户体验和搜索引擎优化都有好处。随着谷歌搜索算法的改变，拥有一个手机友好的网站实际上可以提高你的网站的排名。然而，有些人仍然在做错事，我见过一些网站在更大的桌面屏幕上看起来很棒，但是当缩小到移动屏幕时，他们肯定需要一些工作。仅仅因为在移动设备上，三列式桌面设计整齐地流进一列式布局中，这并不能使其完美。页面速度（另一个SEO排名信号）是响应式开发的另一个重要因素。研究指出，加载速度慢会导致用户流失增加和跳出率上升。谢天谢地，有一些不错的工具和技术可以帮助你。您可以结合使用缓存、全局CDN、延迟加载和服务响应映像。特别是针对响应图像，这些图像使我们能够为不同的设备/屏幕大小提供适当的图像大小。这样，当用户在移动设备或平板电脑上访问页面时，较大的图像现在变成了更小的文件大小，从而提高了页面加载速度。对一个图像执行此操作可能不会产生巨大的差异，但是当您有十几个图像时，您可以看到一些显著的收益。有几种不同的方法来实现响应图像，但是使用HTML5元素已经获得了支持，并且对于旧的浏览器也有退步的余地。使用它，您可以为每个屏幕大小，甚至设备方向指定所需的精确图像。另一种流行的方法是使用JavaScript库，比如Foundations Interchange。后者还可以用于不仅仅是图像；您甚至可以将页面的完整部分替换为移动优化版本，从而节省宝贵的带宽并提高性能。Richard Hammond，UpanupWhile Responsible web design front-end views的合作伙伴和首席开发人员可能会与您的上司和客户一起通过用户接受测试（UAT），在这种情况下，我们经常看到三个缺点：内容模型忽视-内容仍然是响应式网页设计的王者。与两三年前相比，这已经不是什么问题了；但是，仍然存在一种响应式的设计方法，即声明与流行设备（1024px、800px、768px、568px等）分辨率匹配的媒体查询断点，然后根据项目在同一断点上统一堆叠或调整列大小。例如，在一个50%的列中，并不是所有的内容都应该在800px下拉伸100%。除了为特定设备设置的全局网格规则外，更加谨慎地对待每个内容组件，将导致跨平台的深思熟虑和更具吸引力的用户体验。CSS预处理器膨胀-性能对于前端开发人员来说并不是什么新鲜事，页面权重是这方面的一个重要因素。除了最小化服务器请求和使图像"精灵化"或压缩文件大小外，CSS绘制、位置和格式规则继续对权重产生影响。CSS预处理器受到了设计师和开发人员的一致欢迎。虽然这些语言扩展（如SASS和LESS）解决了许多曾经让社区感到压力的代码设计和样式表维护难题，但它们也被用作页面权重的自动攻击武器。CSS简洁的基本原理不再占主导地位，相反，CSS创建者乐于嵌套并编写附加规则来覆盖其他不必要的规则，因为继承早已被遗忘。诚然，一个优雅而高效的样式表所节省的任何页面重量都可以被一个巨大的图像所抵消，但是CSS作者在使用预处理器时应该尽自己的职责。剥离移动-最后，有一个学派认为显示内容（即文字）是最有效的移动呈现。为了实现这一点，在低端媒体查询断点中写入一个隐藏元素库。这与mobile-first设计背道而驰，应该是糟糕设计的危险信号。在智能手机和平板电脑的先进状态下，互动和消化"仅限桌面"的功能和功能应该成为过去的思维模式。尽可能为所有设备提供丰富的内容和功能。用户习惯于并经常期望与笔记本电脑或台式机相同级别的功能。如果你在移动设备上删除它，你的桌面视图很可能也不需要它。克利夫罗登网站（CleveroadOn the web）首席编辑纳塔莉娅•哈琴科（Nataliya Kharchenko）认为，现实情况是，一种尺寸并不能满足所有设备、需求和数据需求。因此，对跨设备工作的布局和内容的需求越来越大。忽视这一事实会导致用户失去信任，因此我们需要创建响应迅速的网页设计。你可以通过任何大小的设备轻松调整网站的大小和内容。因此，您可以使用相对度量单位，EM，REM或百分比，而不是使用固定大小的元素。这是基本思想。然而，反应性并不局限于相对的尺寸。依据仅仅遵循相对大小的概念，您不会得到您期望的直接结果。小屏幕上的站点元素可能过于复杂，而在大屏幕上则存在间隙。这就是为什么媒体查询是必要的。概念