响应式设计是著名网页设计师EthanMarcotte于2010年5月提出的设计理念，随后席卷前端和设计领域，成为当今网页设计的一大趋势。正如Ethan所说：“响应式网站设计提供了一种新的选择。这种基于网格布局和CSS3的流畅网页设计可以让网页随着屏幕的变化做出响应。这是一种更统一、更全面的设计技术，一种灵活的设计方法，打破了网页固有的形式和局限性。”这种兼顾多屏多场景的灵活设计，正是响应式设计如此迷人的地方。这类似于编程开发??领域所追求的“一次编写，到处运行”。所以在短短几年内迅速流行起来，进而成为大趋势，可以说是意料之中，也是水到渠成的事情。响应式设计的网页已经很多，相关的教程更是数不胜数。国外设计博客Pixel77为喜欢学习的你收集了15篇优秀的响应式网页设计教程。下面先简单介绍一下这15篇教程，Uniset会挑选比较突出的文章单独翻译。现在，让我们先睹为快！1.响应式网页设计：它是什么以及如何使用它（作者：KaylaKnight）KaylaKnight的这篇文章是一个非常好的入门基础教程。Knight带您了解响应式设计的基础知识，让您了解其基础知识。如果您想开始设计响应式网页，本文将告诉您从哪里开始。2.响应式网站导航（作者ThoriqFirdaus）在响应式网站中，导航栏是非常重要的部分。如何设计出高质量的响应式导航栏就显得尤为重要。因此，我们特地挑选了这篇优秀的响应式网站导航设计教程，供大家参考学习。3.使用CSS搭建一个基本的响应式网站（byJasonMichael）这是响应式网站设计领域的又一重量级入门教程。这篇文章不仅告诉你响应式网站的基本CSS设计方法，Micheal还将帮助你解答一系列设计响应式网站时的常见问题和误区。4.如何将任何网站转换为响应式网站（作者RochesterOliveira）本教程也是从响应式设计的基本概念开始。作者巧妙地分析和解读了常见的标签，还在文章的后半部分教了一课宝贵的技能：教你如何将现有网站转换为响应式网站。所以，这篇文章绝对不能错过！5.使用响应式网格系统设计网站（byGrahamMiller）响应式网格系统不是一个框架，深入理解网格系统是非常有意义的。如果你想深入理解这个概念，还有什么比阅读这个概念的创造者GrahamMiller的文章更好的方法呢？本教程将教你使用网格系统在1小时内快速创建一个响应式网站！#p#6。教你使用FlowType.JS做响应式网页排版（作者JDGraffam）众所周知，排版是Web的未来。所以，学习响应式排版并不是一个额外的优势，而是一个必须具备的技能。因此，京东的这个排版教程就是为了帮你解决这个问题。7.HowtoMakeResponsiveTypesetting(byValHead)这是另一个关于排版的教程。ValHead详细解释了为什么一种尺寸不能适合所有人，并详细说明了如何使图像和布局随着尺寸的变化而响应。8.ResponsiveDesignTrilogy(byNickLa)本教程详细介绍了如何正确使用Meta标签、HTML结构和媒体查询来制作响应式网站。这是最基础的入门教程之一，写的非常好。如果你还没有很好地掌握这些东西，不妨看看这篇文章！9.CSS:ResponsiveNavigationBarMenu(byNickLa)这是NickLa的另一篇文章，也是关于如何使用CSS编写Responsivenavigationbar的文章。这篇文章写得简洁明了，值得一读。10.响应式网站设计中的可扩展导航模型（MichaelMesker着）本教程可以帮助您创建一个易于配置且体验良好的响应式网站模板。本文来源于作者Mesker的经验总结。在此之前，他参与过一个大型的响应式网站开发项目。#p#11.基于现有网站的响应式改造（作者MattStow）作者MattStow教您如何通过本网站将现有网站改造为足够优秀的现代响应式网站。强烈建议需要修改网站的同学阅读本文。12.如何在小屏幕上将导航栏转换为下拉框(byChrisCoyier)如何在小屏幕上将导航栏转换为下拉框？这个优秀的教程可以帮助您解决这个小问题。当你处理移动端的页面布局时，有时候会有这样的需求。有了这个教程，你再也不用担心这个问题了！13.响应式图片：尽量让图片适应环境（作者ScottJehl）本教程将教你如何在响应式网站中正确控制图片，使其适应屏幕尺寸的变化。作者ScottJehl思路清晰，言简意赅，值得一读。14.响应式水平布局（作者：MaryLou）本教程将教您如何创建具有多个水平滚动面板的响应式布局。这种设计的技巧在于，当屏幕空间足够时，面板会水平展开，当空间不足时，它们会合并在一起，以标签的形式存在。15.CSS3SlideshowResponsiveWebsiteDesignwithParallaxFluidEffects(byRingWing)视差滚动网页也是目前网页设计的趋势。如何使用CSS3将响应式网站中的幻灯片制作成视差滚动效果，这就是本教程将要求你做的。
