@陈子木 响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念，随后席卷前端和设计领域，成为了如今网页设计的大趋势。正如同Ethan所说：“响应式网站设计提供了一种全新的选择，这种基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。这是一种更为统一，更加全面的设计技巧，一种打破网页固有型态和限制的灵活设计方法。”
这种兼顾多屏幕多场景的灵活设计，这就是响应式设计令 人着迷的所在。这一点和编程开发领域所追求的“一次编写，到处运行”有着异曲同工之妙。所以它在短短几年内迅速火起来，然后成为大趋势，可以说是意料之 中，水到渠成。响应式设计的网页现在已经很多了，而相关的教程也是数不胜数。国外的设计博客Pixel77搜集了15篇优秀的响应式网页设计的教程，让喜 欢钻研的你来学习。
更多关于响应式网站的文章：
《紧跟潮流！30个新鲜的响应式网站欣赏》
《最热门工具推荐！为响应式网站而生的40款栅格神器》
《干货！如何在响应式网页中安置和处理图片及视频》
现在先简单介绍一下这15个教程，随后优设会挑选其中比较突出的文章单独翻译出来。现在，大家就先睹为快吧！
1、响应式网页设计：它是什么以及如何使用（作者Kayla Knight）
设计师必读的15个响应式网页设计教程Kayla Knight的这篇文章是非常不错的入门基础教程。Knight会引导你了解响应式设计的基础知识，让你明白它的基本原理。如果你想着手设计响应式网页，这篇文章会告诉你应该从何处下手。
2、响应式网站导航（作者 Thoriq Firdaus）
设计师必读的15个响应式网页设计教程响应式网站中，导航栏是非常重要的组成部分，如何设计出优质的响应式导航栏就显得特别重要了。所以我们专门挑出这篇一流的响应式网站导航设计的教程，供大家参考学习。
3、使用CSS构建基础的响应式站点（作者 Jason Michael）
设计师必读的15个响应式网页设计教程这又是一篇响应式网站设计领域重量级的入门教程。这篇文章不仅仅为你讲述了响应式网站基本的CSS设计方法，Micheal还会帮你解答一系列设计响应式网站时常见的问题和迷思。
4、如何将任何网站转化为响应式网站（作者 Rochester Oliveira）
设计师必读的15个响应式网页设计教程这篇教程同样是从响应式设计的基础概念开始，作者熟练地分析解读了常见的标签，在文中后半段还传授了一项极有价值的技能：教你如何将现有的网站转化成为一个响应式的站点。所以，这篇文章一定不能错过！
5、使用响应式栅格系统设计网站（作者 Graham Miller）
设计师必读的15个响应式网页设计教程响应式栅格系统并非框架，深入理解栅格系统是非常有意义的。如果你想深入了解这个概念，那么还有什么方式比阅读这个概念的提出者Graham Miller的文章来的更有效呢？这篇教程会教你使用栅格系统1小时快速创建响应式网站！
6、教你使用FlowType.JS制作响应式web排版（作者 JD Graffam）
设计师必读的15个响应式网页设计教程众所周知，排版是Web的未来。所以，学会响应式排版并不是一种额外的优势，而是必备的技能。因此，JD的这篇排版的教程就是帮你解决这方面问题的。
7、如何制作响应式排版（作者Val Head）
设计师必读的15个响应式网页设计教程这是另外一篇关于排版的教程。Val Head 详细地解释了为什么一个尺寸无法应付所有的场景，并且详细介绍了如何让图片和布局能随着尺寸改变而响应。
8、响应式设计三部曲（作者Nick La）
设计师必读的15个响应式网页设计教程这篇教程详细讲述了如何正确使用Meta标签、HTML结构和媒体查询来制作响应式网站。这是最基础的入门教程之一，写的非常不错。如果你对这些东西掌握得不够好的话，不妨读读这篇文章！
9、CSS：响应式导航栏菜单（作者Nick La）
设计师必读的15个响应式网页设计教程这是Nick La 的另外一篇文章，写的也是如何使用CSS来写响应式导航栏的。这篇文章写的简洁明了，值得一读。
10 、响应式网站设计中的可扩展导航模型（作者 Michael Mesker）
设计师必读的15个响应式网页设计教程这篇教程可以帮你创造易于配置、体验良好的响应式网站模板。这篇文章是源自于作者Mesker的经验总结，在此之前，他曾参与过一个大型的响应式网站开发项目。
11、基于现有网站的响应式改造（作者 Matt Stow）
设计师必读的15个响应式网页设计教程作者Matt Stow通过这篇网站手把手地教你如何将你的现有网站转化为一个足够出色的现代响应式站点。强烈推荐需要改造网站的同学阅读一下这篇文章。
12、如何让导航栏在小屏幕上转化为下拉框（作者 Chris Coyier）
设计师必读的15个响应式网页设计教程如何让导航栏在小屏幕上转化为下拉框？这篇优秀的教程可以帮你解决这一小问题。当你处理移动端的页面布局的时候，有时候会有这一的需求，有了这篇教程，你就再也不用担心这个问题了！
13、响应式图片：尝试让图片感知环境自适应（作者 Scott Jehl）
设计师必读的15个响应式网页设计教程这篇教程会教你如何正确控制响应式网站中的图片，让它们能随着屏幕尺寸的变化而自适应。作者Scott Jehl思路清晰，言简意赅，值得阅读。
14、响应式水平布局（作者 Mary Lou）
设计师必读的15个响应式网页设计教程这篇教程会教你如何创建一个具几个水平滚动面板的响应式布局。这种设计的技巧在于，当屏幕空间够大的时候，面板会水平铺开，当空间不足的时候，它们会合并到一起，以选项卡的形式存在。
15、视差流态特效的CSS3幻灯片响应式网站设计（作者 Ring Wing）
设计师必读的15个响应式网页设计教程视差滚动式网页也是目前网页设计的趋势，如何将响应式网站中的幻灯片使用CSS3制作成视差滚动的效果，就是这篇教程要叫你做的事情。
上面基本就是Pixel77所推荐的15篇教程了。有哪些是你们非常想中文化的，请在下方留言，我会有限翻译呼声最高的文章。谢谢！
特别说一下，如果你还从来木有用手机访问过优设网，不妨现在试试，会有惊喜哟→http://www.uisdc.com/
原文：http://www.uisdc.com/15-responsive-web-design-tutorials
相关推荐
它是一个专门为服装定制和设计业务设计的网站平台，可能包含了展示产品、接受定制需求、在线预约设计师、购物车功能、用户评论和反馈等多种功能。响应式设计使得网站能够根据访问者的设备自动调整布局和样式，提高...
响应式设计是现代网页开发的重要概念，它使得网站在不同设备上，如桌面电脑、平板电脑和智能手机上，都能提供良好的用户体验。在这个“【T4563】响应式服装设计展示网站模板(自适应手机端).rar”压缩包中，我们可以...
响应式农家乐民宿网站模板是一个专为农村旅游、民宿预订服务设计的网页模板，适用于网页设计师和开发者。这个模板强调了网站在不同设备上的自适应能力，确保用户在手机、平板或电脑上都能获得良好的浏览体验。以下是...
它包含了一系列必要的文件和结构，使开发者或设计师能够快速构建一个功能完备、视觉吸引力强的网络平台。以下是对这些文件和标签的详细解释： 1. **网页设计**：这表明模板注重用户体验和视觉美学，确保在不同设备...
`响应式设计`是现代网页设计的重要趋势，它允许网页根据用户使用的设备自动调整布局和内容显示。在这个模板中，设计师使用了CSS3媒体查询和Bootstrap框架，确保在不同尺寸的屏幕上，网站的布局都能自然流畅地转换，...
网页设计是前端工程师的核心任务，尤其对于新手而言，掌握基本技能和理解设计概念至关重要。本文将深入探讨这两个方面，帮助新手快速入门。 首先，前端工程师的职能和作用不仅仅是编写代码，他们是连接设计师与开发...
2. **响应式设计**：响应式网页设计是现代网页开发的重要组成部分，它通过CSS3的媒体查询等技术，使得网站布局可以根据用户设备的屏幕尺寸进行动态调整。在婚纱旅拍摄影类网站中，这意味着无论是大屏设备还是小屏...
2. **响应式设计**：响应式设计是当前网页设计的趋势，它可以自动适应不同尺寸的屏幕。在这个模板中，设计者利用CSS3的媒体查询、Flexbox或Grid布局等技术，确保页面元素能在各种分辨率下自适应调整，保证视觉效果和...
响应式度假酒店商务客房网站模板是一个专为度假酒店和商务客房设计的网页模板，它具有适应不同设备屏幕尺寸的能力，确保在手机、平板电脑和桌面电脑上都能提供优秀的用户体验。这个模板采用现代网页设计趋势，结合了...
响应式旅游旅行社网站模板是一个专为旅行社和旅游业务设计的网页设计资源，它采用现代网页技术，能够自动适应不同设备的屏幕尺寸，提供流畅的用户体验。这个模板包含了一系列的文件和目录，使得开发者或设计师可以...
这个模板是网页设计师和开发者构建游戏下载平台时的理想选择，因为它简化了网页布局和界面设计的过程，同时也为用户提供了直观、吸引人的界面。 网页设计方面，该模板可能包含以下关键要素： 1. **响应式布局**：...
总的来说，《超越CSS：Web设计艺术精髓》是一本全方位的指南，它不仅教授了CSS的基本和高级用法，还强调了设计的艺术性和实用性，是每一位Web设计师进阶的必读之作。通过学习和实践书中的内容，设计师可以超越传统...
"网页模板"是网页设计的一个工具，它可以作为设计基础，让设计师或非设计师快速构建一个符合特定风格和功能需求的网站。通过修改模板的元素，如文本、图片和色彩方案，可以定制出独特的网站样式。 【压缩包子文件的...
1. **网页设计的指导与建议**：在设计阶段，前端工程师需要与设计师紧密合作，提供有关页面布局、元素位置等方面的建议。例如，他们可以帮助避免使用过多的阴影、透明效果或圆角等难以通过代码实现的设计元素。 2. *...
在这个特定的标签下，我们可以推测这个模板将融合现代设计趋势，如响应式布局、动态效果和清晰的导航结构，以满足网络媒体工作室的需求。 【压缩包子文件的文件名称列表】: 1. `.htaccess`：这是一个Apache服务器...
- **《设计师式认知》** 作者：Nigel Cross 出版社：华中科技大学出版社 年份：2013年 推荐等级：选读 星级评价：★★★★★ 本书探讨了设计师思维方式的特点和优势，有助于学生培养更具创造性和解决...
网页设计涵盖了一系列技术，包括色彩搭配、版式设计、交互性以及响应式布局等，而网页模板则是网页设计的产物，它将这些设计原则和规范集成到一个可重复使用的框架中。通过使用网页模板，非专业设计师也能轻松创建出...
在开发过程中，设计师可能运用了最新的网页设计趋势，如扁平化设计、响应式布局，以及吸引人的动画效果。同时，美观的设计也需要与功能相结合，确保网站在视觉吸引力的同时，也具有实用性和易用性。 【文件名称列表...
此外，HTML模板的使用也能让我们了解到网页设计的标准化和响应式设计的重要性，使网站在不同设备上都能有良好的用户体验。对于希望提升网页设计和开发技能的人来说，这个压缩包是一个宝贵的资源。