简单的完成Web响应式设计
响应式简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上，屏幕比较宽，就可以一行放2个Div。
到了手机上，或者Pad竖着拿的的时候，一行就只放1个Div。
这里有2个关键点：
一是如何在不修改Dom结构的前提下调整布局。
二是如何判断屏幕分辨率并应用对应的CSS。
以上两点都应该不依赖与JS。
实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left，宽度都用百分比表示。比如下图，黄色部分的宽度是60%，橘色宽度是40%。
如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了，如下图。从而实现不修改Dom实现布局变化。
那么如何不使用JS而实现动态调整CSS样式就是第二个关键点。 HTML5中提供了一种新的CSS语法——@media，学名是Media Query，可以为不同的分辨率设定不同的样式。
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
#head { width: 100%; }
#main { width: 100%; }
#foot { width: 100%; }
#left { width: 100%; }
#right { width: 100%; }
}
上面这段代码的含义就是当屏幕宽度小于等于320像素时应用大括号中的样式。下图是在CSS生效时在浏览器中的效果：
@media还有一些更复杂的用法，比如：
/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
这段语句就是针对iPhone横屏的。即，浏览器宽度在321-480像素之间，且方向是“横向”时生效。
不过自从Retina这中妖艳的屏幕推出，分辨率已经不能代表世界的真相了。小小的Note3的分辨率比一些17“显示的分辨率还高。
所以还有必要判断一下设备的像素密度-device-pixel-ratio。
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
比如上面的语句就是判断终端的像素比是2的话，所渲染的样式。可以适用于iPhone4，iPhone5等设备。
除了上述两点，还需要在页面上增加一个viewport的meta标签，否则在手机上可能会有页面自动缩放的情况。例如：
<meta name="viewport" content="width=device-width; initial-scale=1.0">
总结一下：响应式布局有三个关键点：
- 流式布局 Liquid Layout
- Media Query
- viewport
具体细节就请大家自己研究相关的语法了。
Media Query的语法比较复杂，这里个大家推荐一个工具，可以方便的设计布局，并可以针对各种设备自动生成Media Query的语句： http://www.responsivewebcss.com/
本文转载自腾讯AlloyTeam团队
不会流式布局，就用Media Query和viewport把不需要的东西藏起来了
有点疑惑为什么不直接用display:none隐藏呢。。。
神父来占楼，药药药！！切克闹！！煎饼果子来一套！一个鸡蛋一块钱！喜欢脆的多放面！辣椒腐乳小葱花！铁板铁铲小木刷！ 药药药！切克闹！！ 放点面酱些许甜！趁热吃了似神仙！！ 艾瑞巴蒂！黑喂狗！跟我一起来一套！动词大慈动词大慈！占楼时间：下午2:52:24
电脑端，屏幕分辨率宽度320以下时，测试出文章标题文字溢出
据说现在流行根据浏览器、移动设备，网页能自动适应屏幕
那就是响应式
CSS3 Media Query 响应式媒体查询
以前没事也写过这么一篇 ……
还是习惯把响应代码写在一个CSS里
还敢把图片弄得再大点么
CSS问题。。。。我改下
学编程的都是天才啊
全站Ajax让我搞定了，虽然是假的，但也显得很屌有木有
那你现在应用上了么？
本地
这太牛了
我评论竟然可以插入js
alert("你的能么？");
噗，看来就我有这个问题
...别悲伤。。。
你有没有发现，现在评论部分不好看？还有head和footer 可以拔否？哈哈 :???:
临时改的主题，现在响应式又要改，没时间弄
随便扒吧，哈哈
:grin: 那你直接吧代码给我吧。懒一把
都是HTML
做代码好麻烦
主题不错噢
楼主讲解的很详细，谢谢分享、
有一种恶趣味的伪响应式，可以看看：<经通知，隐藏>
我这里评论不能有外部网址，好了，已经从待审把你拯救出啦了，我的小公主
← ← 小公主……
一看就是用你的程序做的，没有设计没有美感-_-
完了，这都能看出来，果然是我的设计太有特色嘛(￣∇￣)
程序底层框架是我写的，还卖了那站长300块～～
你还是把这留言删了吧，那网站太危险……
删掉干嘛，我网站哪里危险了- -
不不，我指<隐藏>太危险了……
抱歉没说清楚，是本页里所有带“<隐藏>”的评论都帮我删掉。
包括评论id：8577、8593、8602还有这条评论。
（就是“有一种恶趣味的伪响应式”那条到这条的全部评论）
主要我和那站没啥联系了，目前不想有啥瓜葛。
十分感谢！！
嗯，我去找找。
现在呢，我都编辑了一遍
哈这样也好，多谢啦！！
转走不解释。
你博客竟然在备案，好高端
支持一下
做与不做的最大区别是：后者拥有对前者的评论权。
你好，请问下你用的是什么代码高亮插件，方便告知一下吗？