ACCESS响应式设计

一、响应式设计概述

1、将来网页流行区域

趁着3G、4G的普及,越多的人选取手机上网。

举手投足装备正超过桌面设备,成为访问互联网的最广泛终端。于是,网页设计师不得不面对一个难题:怎么样才能在不一样尺寸的装备上表现同样的网页?

ACCESS 1

2、早期解决方案

手机的屏幕比较小,宽度经常在600像素以下;PC的显示器宽度,一般都在1000像素以上(方今主流宽度是1366×768),有的还落成了2000像素。同样的情节,要在大大小小迥异的屏幕上,都突显出满意的法力,并不是一件不难的事。

 

无数网站的化解措施,是为区其他设施提供分裂的网页,比如专门提供一个mobile版本,或者黑莓/
三星平板版本。那样做纵然保险了作用,但是相比较费心,同时要维护好多少个本子,而且若是一个网站有多少个portal(入口),会大大扩张架构设计的复杂度。

3、解决方案

于是,很已经有人设想,能不可能”三遍设计,普遍适用”,让相同张网页自动适应不一样大小的屏幕,依据屏幕宽度,自动调整布局(layout)?

ACCESS 2

4、自选择网页设计

2010年,Ethan
Marcotte提出了自适应网页设计(Responsive
Web Design)那个名词,指可以自动识别显示器宽度、并做出相应调整的网页设计。

 

她创设了一个范例,里面是《霍姆斯历险记》多个主人的头像。如若显示屏宽度大于1300像素,则6张图纸并排在一行。

超宽屏幕PC端:

ACCESS 3

纯屏PC端:

ACCESS 4

机械电脑:

ACCESS 5

手机端:

ACCESS 6

5、响应式设计为主原理(有舍有得)

ACCESS 7

二、响应式设计基本

1、DW(Dreamweaver CC)设计软件的接纳

ACCESS 8

2、响应式主题标签viewport

ACCESS 9

地方那行代码的情趣是,网页宽度默许等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页起先大小占屏幕面积的100%。

3、不使用绝对化宽度

是因为网页会依据显示屏宽度调整布局,所以不能使用相对化宽度的布局,也不可能应用具有相对宽度的因素。这一条卓殊重大。

现实说,CSS代码无法指定像素宽度:

如:width:xxx px;

唯其如此指定百分比涨幅:

如:width: xx%;

4、使用相对大小的字体

字体也无法运用相对化大小(px),而只能选拔相对大小(rem)。

rem是对峙于网页根元素的文字大小,默许html标签的文字大小为16px,1rem =
16px

html {
  font: normal 100% Helvetica, Arial, sans-serif;
}

上边的代码指定,字体大小是页面默许大小的100%,即16像素

h1 {
  font-size: 1.5rem; 
}

然后,h1的深浅是默许大小的1.5倍,即24像素(24/16=1.5)。

small {
  font-size: 0.875rem;
}

small元素的轻重缓急是默许大小的0.875倍,即14像素(14/16=0.875)

技能:在骨子里项目费用中,借使根据上述格局展开折算过于辛劳,有没有更简单的章程来完毕这些单位的折算呢?

答:可以人为设计html标签的文字大小

html {

font-size:62.5%; 相对于16像素的62.5%,等于10px

}

html元素的文字大小为10px,依照rem的设定规则,其1rem = 10px,将来换算时:

12px = 1.2rem 14px = 1.4rem 16px = 1.6rem

5、媒体询问标签(重点)

“自适应网页设计”的基本,就是CSS3引入的Media
Query
模块。

它的意味就是,自动探测显示屏宽度,然后加载相应的CSS文件。

<link rel=”stylesheet” type=”text/css” media=”screen and (max-width:
400px)” href=”tinyScreen.css” />

地点的代码意思是,如若屏幕宽度小于400像素(max-width:
400px),就加载tinyScreen.css文件。

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:
400px) and (max-width: 600px)” href=”smallScreen.css” />

假如显示屏宽度在400像素到600像素之间,则加载smallScreen.css文件。

6、让多媒体标签达成自适应

除此之外布局和文件,”自适应网页设计”还非得贯彻多媒体的电动缩放。

img { max-width: 100%;}

img, object, embed { max-width: 100%;}

三、响应式案例

1、让网页能够分辨设其余升幅

ACCESS 10

2、使用media query标签已毕基于不一致的宽度加载区其他css

ACCESS 11

实在项目成本中,一般是分为三局部:

手机端:最大开间小于767px

平板端:介于768px到1023px之间

PC端:最小宽度大于1024px

3、让网页能够自动去适应终端的宽度,

为了让网页自动去适应显示器的肥瘦,可以在全部内容的最外层为其拉长一个div元素

ACCESS 12

4、初始化CSS代码

ACCESS 13

5、设计Logo导航条

ACCESS 14

6、设计有关板块

详见代码参考css/phone.css,内容如下:

 

ACCESS 15

四、Font Awesome矢量图标集

咱俩在事实上项目开支中,常常会拔取小图标的出力,在初期都是利用PS等规划软件拓展统筹开发的,可是在现今我们可以利用Bootstrap框架中放置的矢量图标集来贯彻网页中的小图标——Font
Awesome矢量图标集

1、复制css与fonts文件夹到项目目录中并维持路径一致

ACCESS 16

2、使用link标签引入font-awesom.min.css

ACCESS 17

3、在网页的确切岗位,设计HTML与CSS代码

ACCESS 18

4、使用Font Awesome矢量图标集

<i class = “fa(标记) fa-2x(大小)
fa-home(矢量图标集名称)”></i>

ACCESS 19

效用如下:

ACCESS 20

扩张:拨打电话与发送短信功用(html5标签)

ACCESS 21

五、分外钟搞定Javascript特效

俺们在实际上项目费用中,平时会利用特效效率,不过对于大家的JS的必要会相比高,要是想在事实上项目支出中,高效的成功Javascript特效不妨设想动用SuperSlider2插件。

那款插件是由动易现设计师——大话主席设计开发的根据jQuery的一款Javascript特效库。

 

行使前提:在动用SuperSlider时必须载入以下两个Javascript文件:

ACCESS 22

1、设计网页中的html与css代码

ACCESS 23

2、为因素添加.hd与.bd标签

运用SuperSlider2有一个前提:必须在标签中隐含了多个class=hd(控制条)与class=bd(内容区)的div标签

ACCESS 24

3、在demo.html页面找到您要利用的特效

ACCESS 25

把上述代码复制放到刚才html标签的最低端即可,如下图所示:

ACCESS 26

六、综合案例:整合微信与响应式

1、项目须要


可以在先浏览器响应式网站,还索要提供数据库的协理

② 在微信中定义自定义菜单(服务号),自定义一共有三个:

微网站:点击那个链接,可以跳转到响应式网站的首页

产品基本:点击产品基本一而再,可以以图文音信的花样再次来到数据库脑血吸虫病行的5个产品

联络我们:以文件方式显得集团的关系音讯


当用户关怀大家的微信公众账号时,可以实时重临一条图文新闻,指点用户进入微站

2、搭建dedecms系统到BAE云平台

使用SVN上传dedecms系统源代码到百度的BAE云平台,上传达成后,我们可以直接预览效果,不过其并不曾数据库的支撑。

3、让BAE提供BAE的支持

1)单击BAE平巴尔的摩的增加服务

ACCESS 27

2)添加新劳动(MySQL)

ACCESS 28

3)选择MySQL套餐

ACCESS 29

4)创设达成后,效果如下图所示

ACCESS 30

5)使用phpmyadmin导入数据到数据库

ACCESS 31

6)设置dedecms系统的配备文件,连接MySQL数据库

在dedecms系统的根目录下有一个data文件夹,里面有一个common.inc.php文件,那么些文件就是dedecms系统的配备文件,相当于中级项目标config.php

因而单击数据库名称,可以拿走如下MySQL音讯:

ACCESS 32

安装common.inc.php文件,效果如下图所示:

ACCESS 33

设置完成后,通过SVN软件上流传服务器端。

7)登陆dedecms系统后台http://域名/dede/即可,输入用户名admin密码admin

ACCESS 34

如果出现如上界面代表曾经安插成功!

4、把前日付出的微信接口对接系统(更换主机或服务器)

① 复制今天的api.php文件到dedecms系统目录下并上传出BAE服务器中


由于api.php文件地点变动了,所以微信服务器中也亟需调整接口地址,又由于api.php文件中的valid验证接口已被诠释,所以想再度验证必须开启valid验证接口,如下图所示:

ACCESS 35

③ 在微信公众平台,重新设置链接地址

ACCESS 36

④ 设置已毕后,必须注释掉valid方法,如下图所示:

ACCESS 37

再次通过SVN提交到BAE云平台,使用微信认证是或不是中标

ACCESS 38

七、微信的自定义菜单

1、微信自定义菜单(创制)

ACCESS 39

在其实项目支出中,个人建议:二级菜单不要跨越3个

2、微信自定义菜单接口分析

ACCESS 40

由上图可以,如若想创设自定义菜单必须有一个前提:须要ACCESS_TOKEN

3、ACCESS_TOKEN

ACCESS 41

在支付中,即使得到ACCESS_TOKEN密钥:

ACCESS 42

以上接口调用方式万分简单,只须求提供七个参数appid与secret,那多个选拔可以在以下任务获取:(基本配备选项下方)

ACCESS 43

应用get请求获取access_token,效果如下图所示:

ACCESS 44

4、创设自定义菜单

透过自定义菜单的创办接口+access_token完成自定义菜单的始建(curl援助)

curl怎样模拟post请求四步走:

1)初始化curl句柄

2)设置curl

3)执行curl

4)关闭curl

例1:使用curl抓取百度页面

ACCESS 45

例2:使用curl+access+token+微信接口完成自定义菜单的创办

ACCESS 46

ACCESS 47

当大家率先次运行时,系统会活动弹出如下错误:

ACCESS 48

SSL证书错误:

当健康请求时,当大家走访服务器时,系统会自行举行证件校检,那一个阐明可以在浏览器端访问到,可是尽管您利用的是效仿访问的格局,则找不到此证书,所以上述程序会报错。那什么解决上述问题吧?

答:可以应用curl禁止服务器端校检SSL证书,只须要在设置curl中,添加以下两行代码即可:

ACCESS 49

双重恳请,结果如下图所示:

ACCESS 50

越发注意:菜单创造成功后,微信端不可能即刻见效,因为微信具有缓存,必须等待24小时才方可生效,大家得以由此取消关注并再一次关心微信账号来达到更新的目的。

ACCESS 51

5、依据上述菜单创制项目菜单(微网站、产品基本、联系大家)

ACCESS 52

证实:type:view,代表跳转链接,可以跳转到指定的url页面

     type:click,代表单击按钮,代表向微信服务器发送请求(api.php接口)

ACCESS 53

对于我们有的是伙伴使用的都是订阅号,其默许没有自定义菜单怎么做呢?

答:可以动用官方提供的测试账号

ACCESS 54

6、自定义菜单的事件推送功效

自定义菜单的推送事件对于微信公众平台而言是一个收下进程,所以可以透过接收接口来完成判断用户单击了哪位按钮:

ACCESS 55

ACCESS 56

① 定义四个变量$event与$key用于接收伊芙nt与伊芙ntKey节点

ACCESS 57

② 在吸收类型中,判断用户请求

ACCESS 58

设置已毕后,通过SVN上传,测试结果:

ACCESS 59

八、微信与MySQL数据库

ACCESS 60

安装已毕后,通过SVN上传代码到BAE云平台

ACCESS 61

九、关怀回复接口

当我们关注微信公众账号时,系统会自行重临一条音讯,那么那个就是关怀回复接口。

解析关切回复接口XML文本:

ACCESS 62

透过以上代码分析可见,如若用户发送的节点新闻包括MsgType为event且伊芙nt=subscribe代表用户单击是关切按钮。

ACCESS 63

测试结果:

ACCESS 64

 

相关文章