开场白
最近在看网页响应式设计方面的书，学习了些响应式网页设计编码方面的皮毛，拿来献丑，也记录下来给自己以后备忘，前端达人路过看到轻喷。
写了这么多年的Java代码，发现现在看前端的书籍反而觉得更有意思。跑偏了，说回正题。
响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
上面这段是百度百科的一个说法。
对前端涉猎不深，今晚只摘一小点放在台面上来说：怎么让网页对浏览器显示窗口的分辨率大小进行调整？
1. 百分比布局
先上个例子。
布局
效果如下图。
这是一个很普通的类似于博客的布局。看样式代码我们发现，这是个固定布局。也是部分程序员在写页面代码时常用的写法。
然而，在这个移动为王的时代，已经是不合时宜了。试想下，你看个网页出现左右滑动滚动条是个什么感觉？改！首先就是将固定布局改为百分比布局。
这里有个很重要的问题，百分比怎么设置？先上代码：
布局
对比上面两处代码，可以发现，我把所有的宽度都转换为了百分比，这个百分比值，是通过下面这个公式计算出来的：
目标元素宽度 ÷ 网页最大宽度 = 百分比宽度
为了保证网页的美观，给网页设定了一个max-width: 960px。这一步之后，再把所有的width值都转换为百分比即可。另外，间距也是我们需要考虑到的能响应的点。所以，我把margin-bottom的值也转为了百分比。再看下效果，恼人的左右滚动条不见了，网页在窗口随意变换大小的时候，也能保证布局的美观。
但是，还是有问题。布局没问题，但如果在屏幕只有很小的情况下，还显示这么多元素，是不是不合适？是的！而且没必要。这时，关靠百分比布局是不行的。需要引进一个新的东西：媒体查询@media。
2. 媒体查询
媒体查询似乎也有很大一块内容可讲，我们这里讲的还是比较常用的一点。让网页的各个模块能够对浏览窗口的大小进行响应。比如说在小屏幕浏览时，把左边的导航区隐藏，让内容区充满中间一大块区域。
布局
这个效果有点难展示，如果可以，你可以复制以上代码在浏览器中试运行一次。
上面的代码最大的不同就是我们用了一个@media属性，这个属性怎么用就不解释了，上面代码有个最简单的用法，估计同行们一看就懂。通过这个媒体查询属性，让网页貌似有了点灵性，更体贴了。
总结
以上两个简单的小技巧，让我们网页具备了简单的响应窗口变化的能力。当然，上面所谓的响应，就是把导航区粗暴的隐藏起来。我们完全可以更优雅，比如说隐藏起来的同时，露出一个按钮，点击按钮，用一个华丽的动画效果把导航区show出来，这里需要用到css3里面一个新的属性：transition。这又是一个很有趣的东西，鉴于现在的时间是凌晨1点05分了，就先打住吧。如果可以，下篇博客再探讨一番。
希望上面这点小内容，对看完文章的你有所帮助:-)