响应式网页设计与实现

摘要

伴随着互联网飞速发展的今天, 设计师和开发者们一直致力于为全球网民提供更好的设计观感和使用体验。随着iOS 和Android 的发布，掀起了移动互联网的浪潮，智能手机、平板电脑、智能家电等新设备层出不穷，我们的世界变得更加精彩纷呈。但这却给网页设计带来了新的挑战，在面对形形色色的终端设备、千差万别的屏幕分辨率，以及良莠不齐的网络连接质量时，目前的设计方法显得力不从心。我们无法预料用户的设备和网络状况，更不可能为每种设备专门设计一套网站，那么在移动互联网时代，如何创新为用户提供更好的设计和体验呢？

2010 年5 月25 日，伊桑·马科特发表在A List Apart 上的一篇文章，为我们打开了思路。在这篇名为《Responsive Web Design》的文章中，伊桑·马科特将三种已有的技术整合在一起，提出了响应式网页设计的概念，用以解决我们当前遇到的设计难题。响应式网页设计概念一经提出就大受欢迎（当然也有争议），很多设计师和开发者纷纷实践并完善这种理念。两年多的时间里，涌现出了越来越多的响应式网站，针对响应式设计的工具和资源也日渐丰富。截至目前，响应式设计是使用一套代码为各类设备提供良好设计效果和使用体验的最佳设计方法。

关键词　响应式设计、网页设计、互联网、移动互联网

目录

摘要 I

引言 1

第1章 什么是响应式设计 2

1.1响应式设计概念 2

1.2响应式设计如何实现 2

1.1.1. 媒体查询 2

1.1.2. 流式布局 2

1.1.3. 弹性图片 3

第2章 媒体查询 5

2.1 使用媒体查询 5

2.2 为什么需要媒体查询 5

2.3 媒体查询语法 5

第3章 流式布局 8

3.1 固定宽度布局经不起未来的挑战 8

3.2 流体布局（自适应布局） 8

3.3 设置百分比元素 11

第4章 弹性图片 14

4.1 响应式图片 14

4.2 禁用iPhone中的图片自动缩放 14

4.3 让图片随视口缩放 15

4.4 为特定图片指定特定规则 15

4.5 给弹性图片设置阈值 16

4.6 超级全能的max-width 属性 16

4.7 为不同的屏幕尺寸提供不同的图片 17

第5章 响应式字体 18

5.1 响应式字体 18

5.2 Pixel(像素) 18

5.3 Em 19

5.4 百分比 19

5.5 Rem 19

5.6 更加适合响应式Web设计的字体 20

参考文献 21

致谢 22