Web响应式布局 正在学习: 1课时 / 6课时
立即报名
试听完毕
请付费后学习完整内容
2992
1
Web响应式布局视频教程 1 响应式布局介绍.mp4
2993
2
Web响应式布局视频教程 2 响应式布局实例(Media Queries模块) 上.mp4
2994
3
Web响应式布局视频教程 3 响应式布局实例(Media Queries模块)下.mp4
2995
4
Web响应式布局视频教程 4 Media Query的使用方法(上).mp4
2996
5
Web响应式布局视频教程 5 Media Query的使用方法(下).mp4
2997
6
Web响应式布局视频教程 6 在移动设备上设置原始大小显示.mp4
2998
7
Web响应式布局视频教程 7 响应式网站的内容设计.mp4
2999
8
Web响应式布局视频教程 8 响应式网站的设计流程.mp4

Web响应式布局

上传者: 沁水百合上传时间:2018-05-04 浏览量: 37次下载量:
简介: 响应式布局使用同样的代码 通过设备适配 满足不同的访问设备 能展现出不同的效果 始终内容优先 移动设备优先。
5XB
/

1、为什么需要使用响应式布局

由于目前移动设备的大量使用,以及PC显示器的尺寸逐渐出现较大差别,传统的web页面已经不能满足多种设备的浏览效果,比如传统页面在大浏览器中会有较大的空白区域,而在小浏览器已经移动设备中,不能完全显示页面,或是将页面缩小至适应移动设备尺寸大小,不能正常浏览,对于点击触点也有影响,很多人会选择放大页面,在进行浏览,这样整个页面就需要不停的拖动,给用户的体验不好。

简而言之,有如下几点:

各种屏幕尺寸各种操作系统各种访问设备各种需求

2014102016081860.jpg

2、什么是响应式布局

一个网站兼容多个终端。

同样的代码 通过设备适配 满足不同的访问设备 能展现出不同的效果 始终内容优先 移动设备优先。

下面效果图可以更好呈现效果在不同尺寸下看到的效果不一样,用户体验更好

timg.jpg

3、响应式布局的优势&不足

优势:

多终端视觉和操作体验风格统一开发、维护、运营成本低不同设备间的兼容性强操作灵活:响应式设计是针对页面的,可以只对必要的页面部分进行改动对用户友好:用户可以与网站一直保持联系,比如URL不变积累分享:通过单一的URL地址收集所有的社交分享链接最佳化搜索引擎:可以完成移动网站和桌面网站的连接无重定向:包含无用户代理定向

不足:

兼容性:低版本浏览器可能存在不兼容问题移动带宽流量:相比移动版定制网站,流量稍大加载需要一定的时间:在响应式设计中,需要下载一些看起来并不必要的HTML、CSS。除此之外,图片并没有根据设备调整到合适大小,而这正式导致加载时间加倍的原因优化搜索引擎:对于响应式web设计,为搜索引擎确定关键字不是一件容易的事。因此相比一般的桌面用户,移动用户多采用不同的关键字,修改标题及其他事项都比较困难Google排名:如果响应式网站仅基于移动内容,它困难会影响到网站的Google排名。因为Google不支持这样的网站,它不会对你的网站进行索引时间花费:开发响应式网站是一项耗时的工作。如果你计划把一个现有的网站转化成响应式网站,可能耗时更多。如果你想要一个响应式网站,最好从草图开始重新设计布局:响应式web设计的布局主要是液态的,这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后,响应式web设计策略才能真正实现。

0%好评度
课程评分:
快给课程打个分吧~
发表 306