EEPW论坛

       前段时间在SIN210上移植了一个GoAhead服务器，使用了CGI通信，也学了一点点网页制作，主要是在这个网站上学习的W3school.com.cn。

        发现以前自己做的网页，在电脑上看着还算舒服，可是到手机上就特别小，完全影响使用，还要用两个手指头放大。偶然间就接触了响应式web设计，这个概念。

       作为一个只会使用C语言的码农，接触了网页制作才发现前端开发原来那么的好玩，有点厉害。

图1：登陆界面

图2：控制界面

响应式Web设计（Responsive Web Designe）简而言之就是页面可以根据不同的设备的屏幕的尺寸动态的改变布局，让用户可以达到最佳的使用感觉。

说了那么多，下面就来举个例子。

就用下面这两个网站吧，

首先看一下这个：http://www.eepw.com.cn/

当你用浏览器打开这个网址的时候，然后调整浏览器的大小，图片如下：

图3-1：全屏打开EEPW

图3-2：将浏览器调小之后的打开的EEPW页面

图3-3：手机上打开的EEPW页面

下面在来看另一个网址：http://www.sinlinx.com/

图4-1：全屏打开SINLINX网站的页面

图4-2：将浏览器调小之后的打开的SINLINX页面

图4-3：手机上打开的SINLINX页面

经过上面的对比可以发现，其实在打开EEPW网页的时候，页面固定的，并不会随着浏览器的大小的改变而改变。

但是打开sinlinx的网页的时候，可以看到网页可以根据浏览器的改变而改变页面的布局。页面随浏览器的改变而改变布局，这个就是响应式web设计，而SINLINX的网站就采用了响应式的web布局。

但是在手机上看网站的时候，会发现，sinlinx的页面效果并不如eepw用户体验好。

仔细看一下域名就会发现，这是手机登陆eepw和电脑登陆的域名不一样（m.eepw.com.cn）。

这是因为eepw做了两套网页，当你用手机登陆eepw官网的时候，网站检测出是手机设备登陆，为手机加载手机设备的网页，这个网页是特意对手机做过适配的，效果会非常好。

因为做两套网页，自然比做一套网页需要的开发人员要多，成本也就上来了。

综合来说，响应式web设计并不是万能的，但相对来说比较好的一个方案，可以自适应窗口。相对于单独做一套手机端的网页，节省了人力。

倘若网站没有为手机设备单独开发一套网页，也没有使用响应式web设计。

用手机浏览这一类网站，用户体验就不让上面的好了：

图5：手机上浏览没有采用响应式web设计的网页

响应式web设计主要是用百分比和em等一些其它的尺寸，来取代固定像素，让网页的元素可以响应式的排版。

其实上面说那么多，只是简单的介绍而已，下面重点来了：

响应式web设计，从网上看到一本感觉蛮不错的，在这里与大家分享一下：

http://pan.baidu.com/share/link?shareid=3324036081&uk=990921528

图6：RWD