15个国外响应式网页设计经典教程推荐

jopen 10年前

原文  http://developer.51cto.com/art/201503/467737.htm


响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念,随后席卷前端和设计领域,成为了如今网页设计的大趋势。正如同Ethan所说:“响应式网站设计提供了 一种全新的选择,这种基于栅格布局和CSS3的流动性网页设计,可以让网页随着屏幕变化而响应。这是一种更为统一,更加全面的设计技巧,一种打破网页固有 型态和限制的灵活设计方法。”

这种兼顾多屏幕多场景的灵活设计,这就是响应式设计令人着迷的所在。这一点和编程开发领域所追求的“一次编写,到处运行”有着异曲同工之妙。所以 它在短短几年内迅速火起来,然后成为大趋势,可以说是意料之中,水到渠成。响应式设计的网页现在已经很多了,而相关的教程也是数不胜数。国外的设计博客 Pixel77搜集了15篇优秀的响应式网页设计的教程,让喜欢钻研的你来学习。

现在先简单介绍一下这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小时快速创建响应式网站!

</div>