一、RWD响应式设计的由来

什么是RWD响应式设计?为何网站需要RWD功能?响应式网站设计RWD是Responsive web design的缩写，最早之前是在2010年由美国著名的网页设计师Ethan Marcotte所提出的网页设计技术，为了因应科技发展快速，有越来越多不同大小的萤幕出现而导致网站显示问题的解决方案，可以说是RWD技术的先驱。

在RWD这个技术概念被提出之前，网站开发者在设计网页时的内部元素排版都是按照桌上型电脑的萤幕大小去设计的，像是文字的padding (内距)、Margin (外距)，图片尺寸等都是固定的，包含每一个元素区块只需要设定适应市面上主流萤幕的大小就好，在当时网站的建构相当容易，并不需要考虑太多显示上的问题。

直到2007年1月， Apple 发表了最新型的手机– iPhone 第一代，开启了全世界风行智慧型手机的潮流，通过智能型手机随时随地无线上网的方式开始影响到人们的生活习惯，”网络”渐渐的变成可以取代电视广告、报章杂志、传单等传统的一种更重要的营销方式，但这时大部分的网站在通过智能手机浏览时，依然存在相当大的问题。

如前言所提到的，网页内的区块( Section )元素都是在设计时都是一样大小的，因此在智能手机的萤幕中，网站内容的排版不是杂乱无比，就是只能浏览到部分的内容，就算网站的内容完整呈现在智能手机萤幕中，但却只是以手机萤幕等比例的缩小所有网站元素，当使用者要点选MENU (网站选单)跳转到其他页面时，必须透过手势放大萤幕中选项的区块，才能够点按到连结，当想浏览网站的其它区块时又必须缩小萤幕显示范围，这样的操作方式对于浏览网站是非常不便利的。

而当网站开发者对于这样的问题还在尝试解决方法时，智能手机开发商为了要带给比其他厂商更好的行动上网体验，率先提供了简单的解决方式，就是通过智能手机中的操作设定，当使用者点选搜寻框或文字方框时，会自动放大该区块让使用者能更清楚的看到内容，而点击文字链接也会有放大区域检视所有链接，以供使用者挑选想要点选的文字项目，这样的做法在当时也算是解决了网页内容太小无法点选或总是点选错误选项的问题，但对于使用者而言，还是多了一个必须设定或点选的步骤，在网页操作的流畅度上来讲依然不足。

人类之所以为万物之灵，就是会不断的追求进步，网站设计师们当然不满足于只局限在这样治标不治本的功能，于是开始了网站“双版本时代“，也就是为网站分别建立电脑版网站( Computer Website )以及手机版网站( Mobile Website )，通过程式语言对网站进行调整，使内容元素可以在智能手机萤幕中正确显示。

而对于像按钮、连结文字、图片等也可以各别为了使用者操作便利而自行定义，删去不必要的内容，强调客户会比较想了解的公司业务或产品的相关服务，并且在排版上采用直式的作法，免去其他不必要的特效(比如当游标移到链接文字时会更改颜色)等，都变成了手机版网站的重点。双版本的方式，大大的改善使用者浏览网站的意愿，同样的内容不同的排版方式，就掌握了另一群以手机上网的客群商机。

但凡事有利就有弊，随着时间的推移，渐渐的双网站版本的弊端也渐渐地浮上台面，以下列出较常见的问题：

1.因为是两个网站必须建立两个不同的网址，可能网域(Domain Name)相同，只有子网域(SubDomain)不同，对于使用者而言判别上常常都会有所误导，在电脑版开启手机版网站时会有内容排版无法正确显示的问题。

2.手机版网站为了要能适应萤幕大小，在设计上并不能完全套用电脑版内容就好，必须合理安排网站内部页面的链接路径，如果说我今天在电脑版上点选”商品介绍”这个选项，会跳转到所有商品列表，而如果要在手机版中进入同样的商品介绍页面，必须要先找到商品分类，才能进入商品列表，对于使用者来说对于同样的网站内容却有不同的操作方式，容易造成混淆。

3.要建立两个网站，如果是请网站设计公司设计会有必须付出更多经费成本的问题，而如果是要自行架站，所花费的时间也是使用RWD网页设计的两倍，更何况手机版网站的架构又是另一种概念，并不是照搬套用电脑版网站就好。

4.当电脑版网站的内容有更新，比如新商品上架，修改价格等，手机版也要同步的做更新，等于说同一件事必须要花费两倍的精神去完成，对于后续的网站维护拉高了时间成本。

虽然有上述的种种缺点，但手机版网页依然是当时的网站开发人员最”熟悉”的方法，毕竟RWD的概念才刚刚被提出，尚未成熟到可以被自由运用的地步，在新技术的方法还停留在书面文字间时，双网站的解决方案就先凑合者用吧!

可惜的是好景不常，智能手机虽然携带便利，可是萤幕毕竟还是太小，对于使用者来说无论是阅读文字或观赏影片对于眼睛的伤害是有深远的影响，而当市场有需求时，就代表商机的来临，于是智能手机的厂商们出于保护人类视力的社会责任，开发出了萤幕更大更清晰，而且又能随身携带的”平板电脑”，而且还标榜着”追剧神器”、”游戏终结者”等各式各样的广告词，于是平板电脑再次掀起了一波抢购热潮，对于移动设备的使用，人们有更好的选择。

但对于网站开发者而言，这无疑是一个不太妙的消息，为了抢占行动上网的商机，已经要多维护管理一个手机版网站了，现在又多了一个平板电脑，难道又要多建立一个平板电脑网站?这是一个搞死人的节奏啊!无数网站开发人员在心中呐喊着，但不管如何这是市场的趋势，总是要想办法解决，于是曾经被遗忘在角落的RWD响应式设计再次获得了重视。

二、什么是RWD 响应式设计?

RWD就是运用HTML5 、 CSS3等程式语言的运用，让网站能够自适应不同设备的萤幕大小，呈现出正常的网站内容，就好像水装在不一样的容器中，就会变成不一样的形状的概念。而其原理就是透过语法给予指令，定义所有网站内容元素在不同的萤幕解析度下，应该呈现的排版及样式。

而如果要更加深入解说RWD，必须要提到Viewport(视埠，可视区域)这个名词，因为网站的设置内容对于智慧型手机或平板的内容来说太大，而RWD运用Viewport在移动设备端的浏览器中建立一个虚拟的可视区域，透过定义Viewport的数值，告诉浏览器应该在当前使用的浏览设备大小给予网站内容怎样的比例，以完成网站资料自动适应萤幕大小的目的。

另外一个RWD的运作原理就是使用CSS3的Media Queries，以@media这个属性定义当萤幕解析度(宽度)大于或小于所设定的数值时，所被定义的网站元素物件所呈现的背景颜色、文字大小、不显示该物件等等规则，这个属性也就是RWD网页设计最核心的思想，让网站能够遵循指令根据显示萤幕的大小自动调整内容。

结论

看完RWD的由来以及使用RWD 网页设计的原因，一定相当清楚使用RWD 架设网站的重要性，如果想要开始使用RWD 网站设计让您的网站适应广大的移动端客户。