目录
一、响应式设计概述
1、未来网页流行趋势
l 随着3G、4G的普及，越来越多的人使用手机上网。
l 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
l 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
l 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
3、解决方案
l 于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
4、响应式设计发展史
l 他制作了一个
范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
超大屏幕PC
纯平电脑
平板端
手机端
二、响应式设计详解 1、viewport属性
基本语法：
<meta name="viewport" content="width=device-width, initial-scale=1" />
示例代码：
l 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
l 具体说，CSS代码不能指定像素宽度：
l 如：width:xxx px;
l 只能指定百分比宽度：
l 如：width: xx%;
使用原则：在实际项目开发中，可以在body
元素内部添加一个<div class=”container”></div>元素对其内部的所有元素进行统一包裹操作，然后设置其宽度为100%
3、使用相对文字大小
字体也不能使用绝对大小（px），而只能使用相对大小（
rem）。
html {
font: normal 100% Helvetica, Arial, sans-serif;
}
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面根元素（
html）默认大小的100%进行缩放的，即16像素。
默认情况下：
1rem = 16px;
0.875rem=14px;
0.75rem=12px;
html {
font-size:62.5%;
}
16px*62.5% = 10px;
1rem = 10px;
1.2rem = 12px;
1.4rem = 14px;
4、媒体查询
l "自适应网页设计"的核心，就是CSS3引入的
Media Query模块。
l 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
l <link rel="stylesheet" type="text/css“ media="screen and (max-width: 400px)“ href="tinyScreen.css" />
l 上面的代码意思是，如果屏幕宽度小于400像素（max-width: 400px
），就加载tinyScreen.css文件。
l <link rel="stylesheet" type="text/css“ media="screen and (min-width: 400px) and (max-width: 600px)" href="smallScreen.css" />
l 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
5、图片自适应
l 除了布局和文本，“自适应网页设计”还必须实现图片的自动缩放。
l img { max-width: 100%;}
l img, object { max-width: 100%;}
l 老版本的IE不支持max-width
，所以只好写成：
l img { width: 100%; }
三、Font-Awesome矢量图标集
1、复制css与fonts到项目相应目录中并保持路径一致
2、引入font-awesome.min.css文件到项目中
<i class="fa fa-2x fa-phone"></i>
说明：
<i class=”fa标识 图标大小 使用哪个图标
“></i>
综合效果：
四、百度云引擎使用
1、创建新应用
网址 ：
http://bce.baidu.com
① 创建应用
② 管理应用
③ 使用TortoiseSVN
管理源代码，用户名与密码就是百度的用户名与密码
2、扩展服务——MySQL数据库
① 单击扩展服务，创建
MySQL
② 设置相关参数
③ 管理MySQL
④ 数据导入功能
⑤ 配置php
连接文件（
dedecms/data/common.inc.php
）
保存并提交到
BAE
中。
五、综合案例——湖南泰宏电力（三网合一）
项目需求：
1
）对接微信公众平台
2
）可以通过自定义菜单引导用户到响应式页面
3）微信端可以共享服务器端
MySQL
数据
微信公众平台（具备）
响应式网站（具备）
1、对接微信公众平台
① 复制api.php
文件到当前项目中
② 配置token
密钥以及开启
valid
验证方法
③ 验证成功后，注释掉
valid
方法，开启自动回复功能
测试效果：
2、自定义菜单
① 自定义菜单创建接口
http
请求方式：
POST
（请使用
https
协议）
https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
由于自定义接口中使用的是
POST
请求，所以可以通过
PHP
中的
curl
库来实现模拟
post
请求。
操作步骤：
1）初始化 $ch = curl_init()
2）设置参数 curl_setopt($ch,参数)
3）执行 curl_exec($ch)
4）关闭 curl_close($ch)
输出错误信息：curl_error($ch)
说明：有的
php.ini
文件中并没有开启
curl
扩展，所以请先确认是否开启该扩展。
② ACCESS_TOKEN
获取ACCESS_TOKEN
获取APPID
与
APPSECRET（可以在开发者中心顶部获取，需扫描二维码）
可以通过浏览器直接访问也可以通过
file_get_contents进行访问：
第一次访问自定义菜单时，系统会报以下错误：
无法获取本地的
SSL
证书，默认情况下，服务器端会校检本地
SSL
证书，但是本地并不存在
SSL
证书，那么如何处理呢？
答：通过
curl
禁止
SSL
证书校检。
再次运行效果如下：
代表创建成功，但是默认情况下，微信自定义菜单生效时间为24
小时，你可以通过取消关注微信公众账号并再次关注即可解决该问题，效果如下：
说明：默认情况下，一级菜单可以创建3
个，二级菜单最多可以创建5
个
3、完成项目需求（2）中的自定义菜单
微网站：调整链接，链接到
http://gzitcast.duapp.com/
产品中心：单击按钮，可以实时获取在线网站的产品信息（图文形式返回
PC
网站数据）
关于我们：已文本返回相关信息给用户（文本接口）
① 删除原有自定义菜单
② 组装JSON
数据创建自定义菜单
测试效果如下：
单击微网站即可跳转到微网站页面
4、完成产品中心功能
定义产品中心与关于我们的事件处理程序
单击产品中心（图文信息接口）
单击关于我们（文本消息接口）
接口说明：
获取
MsgType/Event/EventKey
如何通过微信
API
接口连接在线
MySQL
数据。
示例代码：
如果MsgType
为
event
且
Event
为
subscribe，代表当前为关注回复。
测试结果：
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
