千锋教育-做有情怀、有良心、有品质的职业教育机构

领取全套视频

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  关于学院  >  技术论坛  >  正文

什么是响应式网页?

时间:2020-12-17 14:50     来源:千锋教育 作者:小千
分享: 更多

进入移动互联网时代,各种不同的移动智能设备层出不穷,比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《国内互联网络发展状况统计报告》的统计结果,截至2017年6月,我国网民规模达到7.51亿,其中手机网民达7.24亿,占比达96.3%,较2016年底增长了1.2个百分点,与此同时,使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中,移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的,而且即使是同一个设备,当用户旋转屏幕时,纵向和横向查看的屏幕尺寸也会有差异,所以如何使网页在不同的设备和不同的屏幕分辨率下都能达到理想的显示效果,使得用户不管通过什么终端都能达到理想的浏览和使用体验,是新型的网页设计与开发技术所要达到的需求。显然,传统固定布局的方式已经无法满足这种需求了,因此,现在越来越多的网站都已经开始采用响应式的思想来设计与开发网页。响应式网页设计已经成为当今网页开发技术的新潮流。

响应式网页设计的产生

响应式网页设计,全称是Responsive Web Design,最早是由伊桑·马卡特(Ethan Marcotte)在2010年提出的一个概念,最主要的动机是“如何使得页面布局适应任何的浏览窗口”。响应式页面的设计理念是,页面的设计与开发应当能够根据用户的行为以及设备环境(包括系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,也就是页面应该有能力去自动响应用户的设备环境。简而言之,这个概念指的就是网站的页面能够兼容多种不同的终端,根据不同的环境做出自动的响应及调整。

响应式网页开发的实现方案有很多,包括CSS媒体查询的使用、弹性网格和布局、流式图像等。无论用户使用的是哪种设备,响应式页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以实现自动的适应。

伊桑·马卡特在其个人网站上给出了响应式网页的简单示例。这个网站虽然简单,却具备了响应式网页的要素:自动适应、流式网格布局、流式图像显示等等。读者可以尝试浏览这个网页,通过手动拖动鼠标改变浏览器窗口的大小,查看在不同浏览器窗口尺寸下页面显示的变化。可以看到,在不同的浏览器窗口尺寸下,网页的地址没有发生变化,但网页的布局显示却可能有所改变,如图所示。

1

响应式和“自适应网页”

提到响应式网页,不得不提的就是另一个“自适应网页”的概念了。初学者对于这两个概念往往容易混淆。响应式网页具有自适应的特性,是指页面能自动响应及适配用户的设备环境,但平常所说的“自适应网页”是否就是响应式网页呢?

答案是否定的。适配不同浏览环境的技术有很多,而传统意义上的“自适应网页”虽然也可以针对不同的浏览环境做出自动调整,但其使用的并不一定是响应式网页的技术。比如早期的一些网站或现在一些门户网站的首页,可以根据检测到的不同的客户端而提供不同的浏览网页,比如专门提供一个Android的版本,或者一个iPhone / iPad的版本等,这也是实现网站兼容不同终端的其中一种做法。我们往往可以看到一些“自适应”网站的首页,用PC端浏览时访问的是类似“www.xxx.com”的地址,而使用移动设备访问的是类似“m.xxx.com”的地址,可见打开的并非同一个网页。事实上这种做法同时提供了多个不同的网页,好处是可以极大地保证不同环境下的显示效果,但是缺点也非常明显,就是在网站维护时需要同时兼顾多个不同版本的网页,而且维护的工作将会呈几何级数上升。假如这个网站有多个入口,还会大大地增加架构设计的复杂度。所以,这种使用不同页面来适配浏览条件的方式,往往比较多见于网站的首页,因为如果网站的所有内容页都采用这种方式,这个网站的结构将会变得非常臃肿。而类似这种跳转到不同地址、打开不同网页的适配方式,并不能称为真正的响应式网页,只能叫作“自适应”的。

响应式网页的特点

响应式网页的核心思想,在于“一次设计,普遍适用”,强调的是让同一个地址的同一个网页自动地去适应不同的显示环境,并且能够根据屏幕的设置和布局需要,来自动调整网页内容的显示。而响应式的网站,不管使用什么设备,打开及显示的都是同一个地址、同一个网页,只是这个网页可以通过自动地识别屏幕宽度,对不同的使用环境做出相应的自动调整,从而造成网页的布局和内容展示在不同环境下时可能会有所不同。

开发响应式网页时,首先我们需要改变一下以往的观念,在开发时“以移动设备优先”。为什么要选择移动优先呢?第一个原因就是现在移动设备的使用率越来越高,而且随着移动互联网技术的发展,移动端的应用将成为重点。

还有基于网站开发流程方面的考虑。打个比方,想象一下我们搬家的时候,如果我们要把所有的东西从一个大房子搬到一个小房子,那么很有可能空间会比以前拥挤,而且如果东西太多放不下,可能要不得不舍弃掉一些东西,这种“舍弃”有时会是一个很艰难的决定。但是如果反过来,从一个小房子搬到一个大房子,那么空间会宽松很多。同样的道理,移动端稍微偏小的屏幕尺寸会使得空间比较受限,那么就要求我们在设计时考虑把最重要的内容优先加载和展示,这样,即使后面迁移到较大的屏幕,也可以保证整体的结构不会受到破坏,也许为了页面的美观可能需要增加一些内容,但毕竟做加法会比做减法容易得多。而且由于大小、带宽等限制,移动网页的设计绝大部分应该是内容性的设计,移动优先原则下提高用户体验的一大法宝,就是“把最重要的东西放在最显眼的地方”。

在这里给出响应式网页的一些特点:

(1)媒体查询技术(Media Query)。响应式网页往往包含多个媒体查询语句,用于适配不同的显示条件。

(2)流式网格布局(Fluid Grid Layout)。让网页元素来决定网格的大小和设计,并根据网页元素来决定所占用的网格位置尺寸。

(3)灵活的多媒体显示(Flexible Media)。根据不同设备、不同分辨率、不同网速等环境,来自动适配多媒体内容的显示。比如可以让同一个图像,在iPhone 6上显示“高清”的版本,而在iPhone 4上只显示“一般”的版本。

(4)高性能的JavaScript脚本。由于有些用户终端的运行条件有限,响应式网页里的脚本肯定要考虑运行效率的问题。现在已有一些较成熟的JavaScript框架,比如jQuery等,能大大改进脚本程序的运行性能和效率。

最后欢迎大家添加我们的前端技术分享交流qq群:791201477  或者  857920838  加群之后找群管理要前端相关学习资料和学习视频即可,等你来哦~~~

相关文章

  • 北京总部地址:北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 深圳校区地址:深圳市宝安区宝安大道5010号西部硅谷B座A区6层A605/B座C区1层108
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 广州校区地址:广州市白云区永平街永泰学山塘学山文化创意谷A1栋六楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 郑州二七区校区地址:郑州市二七区航海中路60号海为科技园C区10层
    郑州高新区校区地址:郑州市高新区金梭路与银杏路交叉口教育科技产业园南门D座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 武汉金融港校区地址:武汉市东新区光谷大道77号金融港B18栋三、四层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 成都校区地址:成都市高新区肖家河沿街138号肖家河大厦三楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 杭州旺田校区:浙江省杭州市上城区九堡镇旺田书画城A座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 青岛校区地址:青岛市市北区龙城路31号卓越世纪中心4号楼5层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 哈尔滨校区地址:哈尔滨市松北区世泽路689号 科技创新城4号楼405
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 南京校区地址:南京市建邺区应天大街780号弘辉产业园1栋2层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 太原校区地址:太原市小店区长治路230号能源互联网大厦6层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 沈阳校区地址:辽宁省沈阳市浑南区世纪路16号东大软件园B园B1座A201
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 合肥校区地址:合肥市包河区徽州大道396号东方广场B座12A
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、网络营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 千锋教育服务号

    关注千锋学习站小程序
    随时随地免费学习课程

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱

[an error occurred while processing the directive]