流体网格是响应式设计的核心。网格使您可以对齐页面上的元素，并按照一定的层次结构以视觉上吸引人的方式对其进行布局。流体网格的缩放取决于用户屏幕的大小，并确保所有页面元素都紧随其后。尽管在设计领域中，网格的使用一直存在于设计领域，但是对于网站设计而言，仍然开发了简单的响应式网格来帮助设计人员和开发人员进行网站设计。在这些最初的响应式网格之后，各种各样的响应式CSS框架突然出现，它们都将其代码基于流体网格。
如今，原生网格以“ CSS网格布局模块”的形式进入CSS。现在，浏览器的支持非常可靠，这为希望探索流畅，响应式网格而无需依赖框架的网站设计人员提供了巨大的可能性。
2.媒体查询
媒体查询自2000年代初期就存在，但是直到2012年才成为W3C推荐的标准。像流体网格一样，媒体查询代表了响应式网站设计背后的基础技术。借助媒体查询，网站可以收集有助于确定访问者用来访问它的屏幕尺寸的数据。掌握了这些信息后，便会有条件地加载适合该特定屏幕尺寸的CSS样式。
3.响应式图像和媒体
当您只处理文本时，响应式网页设计会很好地工作。但是，现代网站包含许多媒体，例如图像和视频，这可能有些棘手。
处理图像和其他媒体文件的正确方法是使用max-width属性，而不是使用图像或媒体文件的尺寸。一个示例如下所示：
img { max-width: 100%; height: auto;}
如果要包括其他媒体类型，则样式设置会变得更加细微差别。height属性将不起作用，因此将填充物应用于容器的底部，然后将介质放置在该容器中是可行的方法。Thierry Koblentz早在2009年就提出了这种方法（hack） ，它仍然是最强大的方法。
.wrapper-with-intrinsic-ratio { position: relative; padding-bottom: 20%; height: 0;}
.element-to-stretch { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
将其添加到CSS代码后，所有图像和媒体文件都将随浏览器缩放，并且不会扩展到其容器之外。
既然我们已经介绍了响应式网站设计的核心原理，那么让我们深入研究它带来的优势。
响应式网页设计的优势
有很多响应式网页设计的好处。它可以对您的SEO，转化率，用户体验以及其他有助于业务增长的业务产生积极影响。以下是12个最重要的响应式网站设计功能和优点。
1.改善的用户体验
响应迅速的网站可以带来更好的用户体验。指示用户体验质量的主要因素是用户在您的网站上花费的时间。如果他们由于被迫不断捏和缩放而感到难以导航或使用，他们将不会留在您的网站上。
但是，如果您的网站可以扩展并响应屏幕尺寸的变化，那么访问者将不会在访问菜单，链接，按钮或填写表格时遇到问题。结果，他们的用户体验会更好，他们会在您的网站上花费更多的时间。
改善的用户体验和网站可用性可以为您的业务带来更多的口碑介绍和新客户。
2.移动流量的增加
统计数据显示，在2017年最后一个季度，全球将近52％的网络流量来自移动设备。那占所有Internet流量的一半以上，并且表明您无法承受放弃响应式网站设计的负担。首先调查您的访问者中有多少来自移动设备，以及他们在您的网站上花费的时间。然后，实施响应式设计并比较两个数字。网站适应视口宽度后，您会注意到这些访问者的移动访问量增加了，而在网站上停留的时间也更长了。
3.更快的网站开发
不久前，一种常见的做法是制作一个单独的网站移动版本，该版本在检测到较小的屏幕尺寸时就会投放。但是，开发网站的移动版本比开发响应式网站要花更多的时间，无论访问者使用哪种设备，响应式网站的外观都很好并且可以按预期工作。移动网站版本的另一个缺点是成本更高，因为开发人员必须创建两个网站而不是一个。
4.易于维护
与上面的观点直接联系起来是更容易的网站维护。使用两个版本的网站，您的员工或开发团队必须在管理两个网站上花费时间和资源。有了响应迅速的网站，您的员工可以花更少的时间在维护任务上，而专注于更重要的任务，例如市场营销，A / B测试，客户服务，产品或内容开发等等。
5.没有重复的内容处罚
使用两个版本的网站时要记住的另一点是，您实际上是在创建重复的内容。尽管搜索引擎一天比一天变得更聪明，但他们仍然需要了解哪个网站版本更重要。如果您使用的是网站的移动版本，则即使URL不同，内容也将保持不变。
这可能会导致您的网站的两个版本的搜索引擎排名较低，因为搜索引擎不会知道哪些内容是相关的。如果您希望网站的两个版本都排名良好，则需要创建两个单独的SEO策略和广告系列，并投入大量资金来为网站的桌面版和移动版制作原创和独特的内容。
由于采用两种不同的SEO策略需要太多时间和金钱，因此大多数网站所有者会在其移动网站上使用指向桌面版本的规范标签。结果，大多数单独的移动网站根本没有在搜索引擎中排名。
使用响应迅速的网站，可以成功避免上述所有麻烦。如果您对响应式网站设计的重要性有任何疑问，这将有助于缓解它们。
6.更简单的网站分析
当您拥有网站的两个不同版本时，您需要跟踪两组网站分析，以便了解访问者来自何处以及他们如何与您的内容进行交互。这意味着您需要跟踪多个注册，并感谢您的页面，转换点，渠道等。
另一方面，对于响应式网站，由于您仅关注一组数据，因此可以大大简化您的网站统计信息。您仍然可以深入了解访问者正在使用哪些设备和浏览器，它们在哪里下车以及它们在您的网站上停留了多长时间，但是您无需从多个报告中读取数据即可获得准确的图片。
7.缩短网站加载时间
具有响应能力的网站倾向于在所有设备上加载速度更快，尤其是在智能手机和平板电脑上。借助响应式图像和流畅的网格，页面加载所需的时间大大减少，这直接影响了用户的访问时间。根据研究，如果页面加载时间超过三秒钟，则53％的移动访问者将放弃该网站。同一项研究表明，加载速度快的网站受益于在网站上花费的更多时间以及提高的转化率。这充分说明了响应式网站设计的重要性。
8.降低跳出率
跳出率表示特定网站的访问者在仅看到一个页面后浏览离开该网站的百分比。如上所述，响应式网站意味着访问者在您网站上停留的时间更长，从而降低了跳出率。访客将更倾向于点击并阅读您网站上的其他页面，并探索您所提供的一切。
9.更高的转化率
在您的网站上花费更多时间并降低跳出率是改善访问者的用户体验和建立信任的良好第一步。改善的用户体验和信任度带来了更高的转换率，无论转换意味着注册您的时事通讯，进行购买还是预订电话。暂时考虑一下，与台式机相比，智能手机的平均转化率提高了64％，并且很容易理解为什么必须要有响应式网站。
10.更好的SEO
响应式网页设计的另一个优点是提高了搜索引擎排名。近年搜索引擎已将您网站的响应能力作为确定网站在搜索引擎结果页面中排名的信号之一。如果您的网站没有响应，则搜索引擎会将其放在结果页面的下方，而如果通过了移动设备友好的测试，则它将显示在较高的位置。
响应式网页设计的另一个优点是提高了搜索引擎排名。
11.更多的社交分享
如果做得正确，自适应的网页设计会导致您的内容的社交份额增加。这是响应式网站设计的另一个好处。响应式内容与响应式社交媒体按钮配对，即使在较小的屏幕上，也可以轻松共享指向您网站页面的链接。这可以帮助您提高信誉，并使您接触新的受众，从而带来更多的流量和更多的转化。同时，社交信号也会间接影响您的搜索引擎排名，因为搜索引擎会注意到参与度和搜索需求的增加。
12.更好的反向链接
最后，值得一提的是，响应型网站可以在建立反向链接方面为您提供帮助。反向链接在任何SEO策略中都起着重要作用，因为它们向搜索引擎表明其他网站将您的网站视为信誉良好的信息来源。如果您的网站没有响应，其他网站将不太可能链接到您。毕竟，链接到无法提供良好用户体验的网站也会使它们看起来也很糟糕。
通过响应式网站改善您的业务
如您所见，为您的企业提供了许多响应式网页设计优势。如果您的网站仍未响应，那么规划重新设计新的，流畅的布局是不错的第一步。它将帮助您确定哪些页面元素最重要，哪些页面可以删除以及要保留在站点上的页面数量。
一旦确定了网站改版的方向，便可以为您的网站选择合适的网站建设公司。然后，可以通过响应式网站提高网站的转化率，参与率，SEO等。
作者：岑辉宇博客
