什么是响应式网页设计？

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是为移动互联网而生的！

怎么做？

其实响应式网页的实现很简单，都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ } }   /* for 360px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:360px){ selector{ } }   /* for 480 px width screen */ @media only screen (min-device-width:361px)and (max-device-width:480px){ selector{ } }

当然依靠屏幕宽度来进行适配是最简单的方法，media query有很多参数可以使用比如orientation、aspect-ratio等。

其实，media query是响应式网页设计中被用到最多的技术。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

加载很多不需要的资源，比如多余的图片和样式内容带宽限制移动终端的内存和CPU限制图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了，已经有很多工具和资源供我们参考和使用：

CSS 框架

320 and UpMobile BoilerplateGolden Grid SystemGridlessLess Framework1140 CSS Grid SystemFluid 960 Grid SystemSimpleGridSkeleton

实用工具

Respond.js，让IE6-8支持meidia queryResponsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞ScreenFly 和ProtoFluid类似responsivepx 更直观的测试网站对不同分辨率的适配性

争论和总结

响应式网页设计被提出以来，争论就不断，其实核心问题只有两个个：太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面，而后者纠结响应式网站不像手机网站。

转载于:https://www.cnblogs.com/Better-Me/p/3478926.html

相关资源：JAVA上百实例源码以及开源项目