响应式设计最近比较火。几乎所有人都在讨论或者写作相关的内容。
那么是什么让一个网页设计方案可以做到响应不同设备？响应式设计是一种方法，可以使网页根据不同设备的浏览器分辨率做出相应的调整，以达到最佳展示效果。这样的设计理念已经存在好几年了。在2013年，响应式设计被人们广泛接受，呈指数增长的大量网站开始应用这一设计理念。
响应式网站使用media queries检测访问它们的设备以及当前使用的设备分辨率。一旦检测确定，灵活的图片，字体以及网格就会调整网页设计以适应当前屏幕。如果你想实时观察响应式设计，在浏览网站的时候请调整浏览器的大小。Mashable网站是一个很好的例子。调整将使你了解设计师创建网站的意图。
响应式设计因为市场上数量巨大的平板电脑和智能手机而变得非常流行。通过平板电脑和智能手机访问互联网的用户迅速增加，使得开发商必须考虑以不同方式（不同的分辨率）呈现内容的必要性。
所以你需要知道什么是响应式设计？本文包含响应式设计十个重要概念。
1、响应设计不仅仅是一个趋势
我们使用各种不同的设备似乎是不可能改变的。
电脑显示器的尺寸和形状不断的增加和扩展。
这些因素应该足以理解为什么响应设计是如此重要，有可能成为开发商的标准做法。每个网站都需要做好设备。无论用户使用何种设备访问网站，都期望获得一致的体验。事实上，使用响应式技术的网站数量已从2010年开始稳步增长，A List Apart是响应式设计应用的最前沿。
响应式技术，虽然有时在规划阶段非常耗时，但是从长远来看可以帮助开发人员节约时间。使用响应式技术，不需要专门为移动设备重新设计网站和重定向。这可以使网站更新变得更简单，因为一个更新就可以解决所有的设备。
响应式设计也促进一致性。无论设备大小，视觉体验是一致的。这种一致的品牌体验可以帮助网站或企业获得用户认同。
2、响应的设计不是针对移动设备的设计
响应式设计是在移动设备上渲染内容的一项伟大技术，但它不是移动设备设计。响应式设计是“整个网页设计。”
是的，响应式设计应该适应移动设备。我们甚至可以认为，设计的开始阶段就是针对移动设备，但它远远不止这些。最好的响应式网站可以在台式机上以不同的分辨率浏览，从普通的1024x768到800x600，1366x768，以及1920x1080。这些网站在平板电脑，视网膜屏以及智能手机上都能获得一致的视觉体验。
如果开发者认为响应式设计只是针对移动设备，那么保持整体视觉体验的机会就已经错过了。移动设备，虽然是与整个响应设计对话的起点。但它只是设计和规划响应式网站的惯例。许多设计师和开发者发现在此基础上扩展设计会更容易更节约开发时间。
3、一切都是灵活的
灵活性是响应式设计的关键。栅格系统是灵活的；字体是灵活的；图片也是灵活的。如果你忽视这些因素中的任何一个，你的网站设计将会遇到困难。
此外，当你考虑设计的灵活性。应对不同的浏览器大小，最好的处理方法应该包括修改，增加或删减。针对某些特别小的设备，图片和内容可以隐藏以获得更好的体验。或者你可以选择一个简单的总体设计方案，使网站具有跨设备统一的外观。
记得在开发和设计过程中保持思维的灵活性，就像你所期望的结果一样。
4、优秀的响应式设计起源于栅格系统
使用栅格系统不是一个新概念，从出版行业问世开始就已经被人们应用。 响应式栅格系统是比较新的概念。
最好的响应式项目包含一个响应式栅格系统。网站可以按照百分比或栅格进行缩放。响应式栅格可以漂亮的完成这一计划工作。
考虑用户浏览网站最常用的宽度，最有效的栅格系统包括至少三个不同版本的浏览器宽度-768像素或以上，480到768像素，320到480像素-以及平板电脑和移动设备版本。一些开发商选择大于1000像素的栅格支持宽屏显示器。虽然可以用最佳分辨率渲染一个网站，但是响应式栅格系统可以填充屏幕上的空白区域。
另一个选择是使用日益普及的fluid breakpoints，由整体设计决定而不是预定的锚点。这种更灵活的方式可以帮助普通的breakpoints方式适应市场上越来越多的不同设备。
有很多用户友好的栅格系统可以选择。Twitter的Bootstrap和切图网（qietu.com）的快切css框架是两个出色的响应式栅格范例，它们真正展现了栅格系统的能力。
5、图片的尺寸和清晰度非常重要
质量低劣的图片在任何尺寸下都不会好看。图片质量比图片数量更重要。同样重要是图片的加载时间。考虑移动设备用户时，需要特别考虑有限的网络带宽。
在图片质量和加载时间之间取得平衡。确保优化图片适应网页；避免加载完整图片以及使用CSS属性缩放图片。在上传之前裁切图片，在保证质量的前提下以最小尺寸保存每一张图片。
在响应式布局中使用图片，有几个选项：使用有限数量的图片，在移动设备框架中限制图片，使用多个版本或允许图片在移动设备下隐藏。这些选项都可以很好的工作，尽管一些开发商由于用户必须加载图片而不能隐藏，即使他们是看不见的。
6、字体必须具备足够的识别性
使用一种尺寸的字体无法适应所有情况。24p的Helvetica字体在桌面上很漂亮，但是在移动设备上却难以辨认。字体也应该遵循响应式设计的准则。
响应式字体的核心概念是行宽。眼睛每次只能处理有限的字母。为保证可读性，应该根据屏幕宽度进行优化。对于网站而言，每行50-75个字母被认为是理想的，对于移动设备是每行35-50个字母。如何选择字体的大小取决于可读性。
考虑到垂直方向的文字段落更容易阅读，很多时候采用滚动模式。行距会影响眼睛的疲劳度。很多网站使用140p行距。对于较小的屏幕，可以考虑添加额外的空间来提高可读性。
最后，考虑使用字体的类型。Novelty typefaces，dramatic lettering和衬线字体，在大屏幕上看起来很好但不适合小尺寸屏幕。可以调整这些字体的间距和行距，使用他们的艺术风格元素，或考虑换一个不同的字体。在小尺寸屏幕最容易阅读的字体类型是regular sans serif styles。
7、响应式设计促进SEO
响应式设计会提高搜索引擎权重。这会促进网站的品牌和销售，更多接触用户的机会，这一好处使开发者有足够的理由考虑采用响应式设计方案。
因为一个响应式网页设计只有一个URL，而不是多个页面指向移动设备，链接是简单的。不要远离主网站和广告区域（比如使用谷歌的AdWords）都指向一个位置。
网站有一组标准的语言，元数据和关键词也很重要。在更新的时候就不需要担心链接重定向错误的问题。
另一个优点是有利于分析和数据收集，你不需要跟踪多个URLs重定向到主站或URL。响应式网页可以收集分析数据，无论用户使用何种设备。
8、无需害怕media queries
对于某些人，响应式设计最害怕的一部分是media queries。无需害怕media queries。
media queries通过CSS可以确定不同设备的功能和提供不同的风格适应设备。media queries扩展media属性，帮助网页设计师使用相同的HTML设置多个布局以适应用户的设备。你可以在确定屏幕大小或设备特征后使用正确的布局。
使用media queries定义breakpoints，你可能需要使用栅格系统。常见的宽度包括320,480,600,768,900和1200像素。
使用media queries的另一个优势（通常以百分比来调整大小），他们可以创建额外的灵活性，在不同尺寸的设备上更人性化。
9、导航是关键
下拉菜单的时代可能被终结。简单的导航将成为响应式网站的一个重要特征。
下拉菜单在触摸屏上很难操作。导航必须方便用户操作。较大的导航元素越来越受欢迎。再次，触摸设备驱动这种趋势，因为44x44像素的最小尺寸最适合用户在移动设备上点击。
在思考和设计导航时，需要考虑最小尺寸和最大尺寸。记住，额外的导航元素可以添加，并且尺寸可以更大。
隐藏滑动风格的导航日益普及。通常在屏幕上方通过单击或点击一个图标打开一个菜单。这个风格可以有更广泛的应用。一个很好的例子，Chris Coyier的CSS技巧文章：在小尺寸屏幕下将简单导航转换为下拉菜单。
保持设计简单，在任何尺寸下都容易被理解是导航设计的关键。用户必须能够快速了解如何加以有效的使用网站。
10、响应式设计将会演变
响应式设计目前还不是一个完美的解决方案；它是一个不断发展的解决过程中的一部分。随着技术和用户习惯的改变和新设备投放市场，网页使用和开发的规则都会被调整。
互联网用户已经开始使用各种设备浏览网站。不考虑浏览器尺寸，最流行的8个设备拥有6种不同的宽度：
iPhone 4S，iPhone 5 – 640 像素
iPad 1，iPad2??– 1024 像素
iPad3 – 2048 像素
Samsung Galaxy Note – 1280 像素
Microsoft Surface – 1366 像素
Google Nexus 7 – 2560 像素
当你采用响应式网页设计，它将你的网站更加直观，在不同设备上提供一致的体验，即使新的设备发布。
不同的设备仍然可以提供非常不同的经历，即使没有响应式设计（例如点击或缩放功能）。即使把大量时间花费在网站上，仍然取决于用户使用何种设备。需要考虑用户在不同设备上如何使用网站。虽然它还不是一个完美的解决方案，但是，响应式设计将继续发展。尽管目前响应式设计有其局限性，从现在它开始变得越来越重要。数据表明，用户使用其他设备访问网络的数量将持续增长。通过应用响应式设计，你可以保证网站在任何环境中都是可用的。
切图网（qietu.com）最早将psd to html服务模式带入国内，也是最早提供响应式布局服务的公司。