“90% 的人移动设备来完成一个目标，无论是在智能手机，个人电脑，平板电脑或电视”
这是根据最新研究从谷歌的话题。这有力地表明，大多数网络用户现在正在使用移动设备消费他们的数字媒体。由于大量具有不同屏幕分辨率的设备，这给开发人员带来了巨大的问题。iPad，Kindle，iPhone和Blackberry… 所有这些设备在制作网站时都需要不同的方法，而这些只是市场领导者。
三种最常见的方式，移动用户移动设备是:
- 重复搜索另一台设备
- 导航到目标站点直接在第二台设备
- 发送自己的链接 (电子邮件或松弛是伟大的这一点)，以重温在他们方便后
想象一下，为这些设备中的每一个创建一个网站版本是多么困难，而且甚至没有考虑未来屏幕尺寸变化的可能性。我们需要一种允许我们为多个设备设计的方法，即使这些设备尚未创建。
我们需要响应式设计!
响应式设计是一种帮助我们为用户提供最佳观看体验的方法，无论他们使用的是什么设备。这是一个概念，它允许网站的各个元素-例如其文本或图像-通过响应用户的行为和正在使用的设备的行为来调整大小和布局。
另一种选择是构建专用的移动或平板电脑应用程序。我们将在另一篇文章中讨论这种方法。
从本质上讲，响应式设计不是一种单一的技术，而是一组实践，使您的网站更高效，易于使用和最大转换。使用各种技术-例如流体网格和一些CSS媒体查询-可以使网站根据用户设备设置的视觉偏好自动响应。
在这篇文章中，我们将介绍在构建和部署响应式网站时需要考虑的一些事项。
了解媒体查询
媒体查询可用于允许您以样式表中的一组特定CSS规则为目标，以便在特定设备上实现。这意味着媒体查询可以告诉您网站上的元素在遇到特定设备时的行为方式。使用这些规则，我们可以裁剪图像以在移动设备上显示，并在桌面上横向定向，而无需更改网站的HTML。可以找到一个很好的存储库，可以查看包含所有媒体查询的列表给你.
流体网格
当我们使用具有动态屏幕尺寸的设备时，流体网格可以帮助我们保持web内容的响应。这些工作方式是定义设计的最大布局大小，然后将网格划分为多个列。然后，元素被设计成具有与基于像素的尺寸相反的比例尺寸，使得每当屏幕尺寸改变时，元素可以通过设备的特定比例在其父容器中调整其尺寸。从头开始创建流体网格可能是一项耗时的任务，但可以通过使用免费的CSS网格系统和生成器。
处理图像
默认情况下，位图图像 (与SVG格式的矢量相反) 不是流动的，因此在缩放时往往会出现问题。这可能会导致图像失去其视觉吸引力，甚至更糟的是，其清晰度和上下文。解决这个问题的一种方法是以相对单位而不是像素尺寸来调整图像的大小。
相对单位使用百分比来帮助图像对每个设备的规格做出反应。使用相对单位的最常见方法是将图像的 “max-width” 属性设置为100%。这个简单的CSS指令将允许图像显示自己的自然尺寸，只要设备的屏幕上有足够的空间。它还会导致图像在其窗口变窄时缩小比例。
触摸屏注意事项
重要的是要考虑到您的网站可能会在具有各种输入的设备上使用。鼠标是网站唯一可行的输入格式的日子已经一去不复返了，随着移动设备的涌入，触摸屏输入变得越来越流行。可以通过实现诸如执行 “滑动” 手势以通过图像轮播前进或 “捏” 以放大信息图之类的小特征来改善这些设备上的用户体验。
行动，而你可以!
响应式设计是关于创建动态调整自己的网站，以确保您的用户将获得最佳的用户体验 (UX)。响应式网站无需开发任何其他类型的移动网站，从而使它们成为提高网站覆盖面的一种经济有效的方式。使用流体网格，媒体查询和灵活性，我们可以开始利用自己来利用移动设备用户的涌入，甚至可能产生更高的收入。
随着最新的移动技术的引入，技术世界上最大的企业也纷纷效仿。甚至谷歌最近也推荐了响应式网页设计 ，并宣布他们正在搜索结果中检查网站是否对移动设备友好。如果没有正确实施，这可能会对您的网站排名产生负面影响，所以为什么不开始使用有用的Infragistics布局管理器工具来确保您的网站今天对移动设备友好!
使用您喜欢的框架为任何场景创建现代Web应用程序。下载Ignite UI今天体验一下Infragistics jQuery控件的强大功能。
</p