响(xiang)应式(shi)(shi)网站(zhan)随着被Google搜索引擎的大力推(tui)荐(jian)早已成为很多(duo)客(ke)户的外贸网站(zhan)建设(she)选(xuan)择，很多(duo)建站(zhan)公司也因此极尽(jin)所能地向(xiang)客(ke)户推(tui)销这(zhei)(zhei)一(yi)产品，很多(duo)客(ke)户即使在(zai)签了(le)网站(zhan)制作合同之后也对(dui)这(zhei)(zhei)一(yi)概念不甚了(le)解，今天河南(nan)云狐(hu)就(jiu)来和大家说说响(xiang)应式(shi)(shi)网站(zhan)，让什(shen)么是(shi)响(xiang)应式(shi)(shi)网站(zhan)不再是(shi)疑问。

　　响应式网站

　　一(yi)，响应式网站的起源

　　2010年5月，伊桑(sang).马科特（Ethan Marcotte）在“A List Apart”写了一篇开创性(xing)的(de)文章（题为(wei)“Responsive Web Design” ），他利用三种(zhong)已有的(de)工具：流动布局（Fluid grids）、媒介(jie)查询（Media queries）和弹性(xing)图片（Scalable images）创建了一个在不同分辨率屏(ping)幕下都能漂亮地显示的(de)网站。

　　Ethan Marcotte力劝(quan)设(she)计师们要(yao)去(qu)利用那些Web特性去(qu)进(jin)行设(she)计： “我们可以将不(bu)同联网设(she)备(bei)(bei)上众多的(de)体验，当作是(shi)同一(yi)网站体验的(de)不(bu)同侧面来对(dui)待，而不(bu)要(yao)为每种设(she)备(bei)(bei)进(jin)行单独剪裁(cai)而使得设(she)计彼(bi)此(ci)断开，这才是(shi)我们前(qian)进(jin)的(de)方向。

　　这也是响应式网(wang)站这个概念(nian)初提出及(ji)实(shi)施，伴随这互联网(wang)的快速发展，也越发的成熟完(wan)善，终(zhong)成为一(yi)个新的网(wang)站功能形式。

　　二，响应(ying)(ying)式(shi)网站(zhan)是怎么“响应(ying)(ying)的”

　　说完(wan)响(xiang)应(ying)(ying)式网(wang)站(zhan)的起源，那我(wo)们接着了解(jie)下响(xiang)应(ying)(ying)式网(wang)站(zhan)是怎样发(fa)挥(hui)“响(xiang)应(ying)(ying)”的。

　　首先得了解下，响应(ying)(ying)式网站(zhan)是顺(shun)应(ying)(ying)移(yi)动互(hu)联(lian)网发展而(er)推出的(de)移(yi)动过(guo)渡概念，什么意(yi)思(si)呢，早在PC时代，人们已经(jing)意(yi)识(shi)到移(yi)动互(hu)联(lian)网时代的(de)到来，但那时大(da)家的(de)网站(zhan)都是面对PC端的(de)，网站(zhan)从(cong)PC到移(yi)动转变需要一个(ge)时间(jian)过(guo)程(cheng)，而(er)响应(ying)(ying)式设计正好顺(shun)应(ying)(ying)了这一时间(jian)过(guo)程(cheng)的(de)网站(zhan)解决方案。

　　响(xiang)应式(shi)网站(zhan)设(she)计(ji)(Responsive Web design)的(de)理念是：网站(zhan)页面的(de)设(she)计(ji)与(yu)开发应当根据用户行为以及设(she)备环境(系统平(ping)台、屏幕尺寸(cun)、屏幕定向等(deng))进行相(xiang)应的(de)响(xiang)应和调整。

　　具体的实(shi)践方式有多(duo)方面组成，包括弹性网(wang)格和布局(ju)、图(tu)片(pian)、CSS media query的使用等。无论用户正在使用笔记(ji)本还是iPad，我们(men)的页面都应该(gai)能够自动切(qie)换(huan)分辨率、图(tu)片(pian)尺寸及相(xiang)关脚本功能等，以适应不同(tong)设备。

　　换句(ju)话说，页面应该有能力(li)去自动响应用户的(de)设备(bei)(bei)环境。响应式网页设计就(jiu)是(shi)一(yi)个网站能够兼(jian)容多个终端(duan)——而(er)不(bu)是(shi)为每个终端(duan)做(zuo)一(yi)个特定的(de)版本(ben)(ben)。这样(yang)，我们就(jiu)可以(yi)不(bu)必(bi)为不(bu)断(duan)到来的(de)新设备(bei)(bei)做(zuo)专门的(de)版本(ben)(ben)设计和开发了，从而(er)节省各方面的(de)资源(yuan)投入。

　　三，响应式网站的好处

　　1，响(xiang)应(ying)式网站具有非(fei)常高的兼(jian)容(rong)性(xing)。传统PC网站不(bu)兼(jian)容(rong)其(qi)他移动端(duan)设(she)备(bei)，PC端(duan)转换至移动端(duan)设(she)备(bei)容(rong)易造(zao)成网页内容(rong)缺失，转换速度(du)慢。而(er)响(xiang)应(ying)式网站不(bu)仅能适应(ying)各种屏(ping)幕尺(chi)寸的手机设(she)备(bei)，也兼(jian)容(rong)各种厂商不(bu)同标准Pad设(she)备(bei)。

　　2，响(xiang)应式(shi)网(wang)(wang)站(zhan)(zhan)优(you)化(hua)更合适。如果没(mei)有响(xiang)应式(shi)网(wang)(wang)站(zhan)(zhan)，我们不(bu)得不(bu)为传统(tong)(tong)PC网(wang)(wang)站(zhan)(zhan)和移动端网(wang)(wang)站(zhan)(zhan)分别进行优(you)化(hua)操作(zuo)，这样既增加了工作(zuo)量也不(bu)利于网(wang)(wang)站(zhan)(zhan)形象的(de)统(tong)(tong)一(yi)，而响(xiang)应式(shi)网(wang)(wang)站(zhan)(zhan)无论PC端还是(shi)移动端都是(shi)同(tong)一(yi)个网(wang)(wang)址，更便于搜索引(yin)擎的(de)优(you)化(hua)措施(shi)，同(tong)时网(wang)(wang)站(zhan)(zhan)根(gen)据设(she)备的(de)不(bu)同(tong)做适当的(de)布(bu)局调(diao)整让访客拥有好的(de)用户(hu)体验(yan)，避(bi)免(mian)了同(tong)一(yi)公司(si)两种(zhong)浏览感受。

　　3，响应(ying)式(shi)网(wang)(wang)站(zhan)(zhan)降低网(wang)(wang)站(zhan)(zhan)维(wei)护(hu)时(shi)间(jian)。响应(ying)式(shi)网(wang)(wang)站(zhan)(zhan)能(neng)做到一条数据(ju)的后台输(shu)入，PC，平板，手机的同时(shi)更新，这样就大(da)大(da)减低了网(wang)(wang)站(zhan)(zhan)维(wei)护(hu)人员的时(shi)间(jian)成本，同时(shi)也方便维(wei)护(hu)人员对网(wang)(wang)站(zhan)(zhan)数据(ju)统一分析。

　　4，响(xiang)应式网(wang)站(zhan)(zhan)节约客户建(jian)站(zhan)(zhan)成(cheng)本(ben)。为了尽(jin)大可(ke)能(neng)让更多消(xiao)费者（浏览者）能(neng)知道我(wo)们的产品，我(wo)们需要(yao)(yao)对所有(you)(you)潜在的设(she)备端(duan)(duan)都做(zuo)一(yi)(yi)个(ge)完整(zheng)，PC端(duan)(duan)网(wang)站(zhan)(zhan)要(yao)(yao)做(zuo)，平板端(duan)(duan)网(wang)站(zhan)(zhan)要(yao)(yao)做(zuo)，手机(ji)端(duan)(duan)网(wang)站(zhan)(zhan)也有(you)(you)做(zuo)，这将是一(yi)(yi)笔不(bu)小(xiao)的成(cheng)本(ben)支出，而响(xiang)应式网(wang)站(zhan)(zhan)能(neng)达到一(yi)(yi)个(ge)网(wang)站(zhan)(zhan)多终端(duan)(duan)使用，相当(dang)于花一(yi)(yi)份(fen)钱做(zuo)三个(ge)网(wang)站(zhan)(zhan)，所以能(neng)节约客户很大一(yi)(yi)部分成(cheng)本(ben)支出，相当(dang)合算。