液体网格图是响应式网站设计方案的关键。网格图使您能够两端对齐网页页面上的原素，并依照一定的结构分析以视觉效果上吸引人的方法对其开展合理布局。液体网格图的放缩在于客户显示屏的尺寸，并保证全部网页页面原素都略逊一筹。虽然在设计方案行业中，网格图的应用一直存有于设计方案行业，可是针对网站制作来讲，依然开发设计了简易的响应式网站网格图来协助设计方案工作人员和开发者开展网站制作。在这种最开始的响应式网站网格图以后，各式各样的响应式网站CSS架构突然冒出，他们都将其编码根据液体网格图。

现如今，原生态网格图以“ CSS网格图合理布局控制模块”的方式进到CSS。如今，电脑浏览器的适用十分靠谱，这为期待探寻顺畅，响应式网站网格图而不用依靠架构的网站制作工作人员出示了极大的概率。

2.媒体查询

媒体查询自2000时代前期就存有，可是直至二0一二年才变成W3C强烈推荐的规范。像液体网格图一样，媒体查询意味着了自适应网站设计方案身后的基本技术性。依靠媒体查询，网址能够搜集有利于明确来访者用于浏览它的显示屏尺寸的数据信息。把握了这种信息内容后，便会出现标准地载入合适该特殊显示屏尺寸的CSS款式。

3.响应式网站图象和新闻媒体

当您只解决文字时，响应式网站网页制作会非常好地工作中。可是，当代网址包括很多新闻媒体，比如图象视频，这很有可能一些繁杂。

解决图象和别的文件类型的恰当方式 是应用max-width特性，而不是应用图象或文件类型的规格。一个实例以下所显示：

img { max-width: 100%; height: auto;}

假如要包含别的新闻媒体种类，则款式设定会越来越更为细微差别。height特性将失灵，因而将填充料运用于器皿的底端，随后将物质置放在该器皿中是行得通的方式 。Thierry Koblentz早就在二零零九年就明确提出了这类方式 （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.改进的客户体验

回应快速的网址能够产生更强的客户体验。标示客户体验品质的关键要素是客户在您的网址上花销的時间。假如她们因为迫不得已持续捏和放缩而觉得无法导航栏或应用，她们将不容易留到您的网址上。