34-微信响应式开发.docxVIP

价值万元的微信教程目录价值万元的微信教程1一、响应式设计历史起源21、未来网页的流行趋势22、早期解决方案23、解决之道24、响应式设计起源35、响应式设计核心原理5二、响应式设计详解61、使用DW软件导入响应式设计项目62、让网页自动识别设备屏幕宽度（viewport标签）63、不使用绝对宽度（使用百分比实现自动伸缩）64、使用相对大小的字体75、media query媒体查询76、让多媒体标签自适应网页8三、Font Awesome矢量图标集81、下载FontAwesome矢量图标集，解压如下图所示：82、把css与fonts文件夹复制到相关目录中并保持两者同级83、在网页中引入核心CSS文件84、在页面中设计相关的CSS代码95、设计矢量图标集9四、十分钟精通Javascript特效91、下载Superslide2插件，解压后如下图所示：92、复制jquery1.42.min.js与jquery.SuperSlide.2.1.1.js到项目103、编写CSS文件104、在demo案例页面，查找相关特效10五、综合案例开发111、把微网站上传到BAE云平台112、扩展服务MySQL数据库133、设置dedecms系统中的配置文件144、把昨天微信的接口移植到BAE云引擎16六、自定义菜单171、什么是自定义菜单172、获取ACCESS_TOKEN密钥173、模拟实现POST实现（curl库）184、使用curl创建微信自定义菜单195、使用curl创建案例菜单216、使用微信文档实现获取按钮单击事件23七、与MySQL数据库数据同步（三网合一）241、链接数据库242、在产品中心引入conn.php文件，操作数据表读取数据253、联系我们（文本返回做为作业）264、订阅（关注）回复接口26一、响应式设计历史起源1、未来网页的流行趋势随着3G、4G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？2、早期解决方案手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。ecshop（wap文件夹）3、解决之道于是，很早就有人设想，能不能一次设计，普遍适用，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？4、响应式设计起源2010年，Ethan Marcotte提出了/articles/responsive-web-design/自适应网页设计/articles/responsive-web-design/（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。超宽屏幕PC端：宽屏PC端：iPad端手机端：5、响应式设计核心原理二、响应式设计详解1、使用DW软件导入响应式设计项目2、让网页自动识别设备屏幕宽度（viewport标签）meta name=viewport content=width=device-width, initial-scale=1 /上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。示例代码：3、不使用绝对宽度（使用百分比实现自动伸缩）由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：如：width:xxx px;只能指定百分比宽度：如：width: xx%;示例代码：使用一个div元素把整个网页包裹起来，然后设置其百度比为100%，然后设置overflow:hidden;4、使用相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（rem）默认情况下1rem = 100%的根元素（html）字体大小html {font-size:100%;}所有浏览器厂商规定：默认100%的根元素大小 = 16px16px = 1rem;14px = 0.875rem;12px =