Station building knowledge

建站知识

扬州网站建设浅谈响应式网站的优势

2019-10-13
872次

  响应式网站设计(Responsive Web Design简称RWD)这个术语,由伊桑•马科特(Ethan Marcotte)提出。他在A List Apart 发表了一篇开创性的文章,将三种已有的开发技术(弹性网格、弹性图片、媒体查询)整合起来,并命名为响应式网页设计。

  响应式网站设计应根据用户使用的设备的分辨率大小进行相应的响应与调整,大限度满足不同设备用户体验需求。响应式网站设计就是一个网站能够兼容多个终端,不需要为每个终端做一个特定的版本。简单地理解:一个响应式网站=phone端网站+pad端网站+电脑端网站。具体的实现方式由多方面决定,包括弹性网格、弹性图片、CSS媒体查询(media query)的使用等。

  扬州网站建设浅谈响应式网站的优势

  优点:

  1:用户体验友好 随着电脑尺寸多元化,智能设备(pad/智能手机)普及化,在当下追求用户体验至上的时代(2016年),之前网站普遍使用固定的宽度(960px)逐渐满足不了现在不同设备与不同分辨率需求。在高分辨率电脑宽屏显示器上,两边留白过多。在手机上显示,内容显示过小,用户为了看清楚,首先需要放大界面,再左右拖拖界面。响应式网站可以根据不同终端、不同尺寸和不同应用环境,自动调整界面布局、展示内容、内容大小,提供非常好视觉展示效果,一致性友好体验。

  2:节省设计开发成本 相对需要开发电脑网站、pad网站、手机网站来说,响应式网站式节省设计开发成本的。从设计角度说,一般来说,响应式网站界面只需要设计两套设计效果图就行了,电脑端与pad端基本可以共用一套设计效果图,手机端重新设计一套就可以了;从前端开发角度说,再不需要开发三套完成不一样的前端代码,只需要根据临界点(如果是基于Bootstrap前端框架进行开发,它上面有明确说明,这个问题下回再和大家分享)为不同终端开发三套不同的css样式;从后期维护角度来说,再不需要分别维护pc界面、pad界面、移动界面,专心维护一个网站即可。

  3:SEO友好 由于H5响应式网站在不同终端有友好的界面展示效果,用户可以与网站一直保持联系,比如URL不变积累分享;通过单一的URL地址收集所有的社交分享链接佳化搜索用引擎。搜索引擎也在变得越来越聪明,它们足够智能可以完成移动网站和桌面网站的连接。Google也建议优先采用响应式设计,因为无论是什么网页版本都是相同的HTML、相同的内容,Google容易处理。

  H5响应式网站图片技术思想:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片",并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。

  扬州网站建设

  响应式设计在2012年被提的比较多,但是响应式设计仍然在不断变化,不断创新。比如,新的设备不断出来(iPad Mini),这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意,“让人们忘记设备尺寸”的理念将更快地驱动响应式设计,所以Web设计也将迎来更多的响应式设计元素。

标签