响应式网站建设：什么是响应式网页设计﹙RWD﹚

响应式网页设计是近几年来愈来愈被重视的网页制作技术，尤其在国发会表示政府官网将全面拥抱响应式网页设计，和google决议不支援手机浏览的网页，在手机的搜寻排序将大幅降低两则重要新闻发布之后，愈来愈多客户会在打电话来洽询的时候，指定网站一定要用响应式网页技术制作。

但是，究竟什么是响应式网页设计技术？我相信未接触过网页设计的民众对这名字一定还是很陌生，因此这篇文章，我们就试用最简易的图说，向各位说明什么是RWD响应式网页设计。

 .

首先， 有几个大重点：

1. RWD是Responsive Web Design 的缩写
2. 中文说法是：响应式网页设计﹙过去也有人称做自适应网页设计?﹚
3. 是因应上网装置愈来愈多元产生的网页制作技术

 

接下来，我们以下几张图片来做说明：

1. 电脑、笔电、平板、手机，不管是用3G、4G、WIFI、光世代还是ADSL拨接上网，这些是现代人家中几乎都有的上网设备，萤幕大大小小尺寸不一。

 

2. 常见上网装置的萤幕解析度，要注意的是现在的手机虽然画质愈来愈好，解析度愈来愈细致，但是硬体规格上讲的解析度，跟实际用手机浏览器上网的显示解析度意思不太一样喔。

3. 这是一个活动网站在电脑萤幕上的显示画面。

 

4. 如果未以响应式网页制作，同样的活动网站在平板上会这这样的显示状态。😯

 

5. 如果未以响应式网页制作，同样的活动网站在手机上会这这样的显示状态，大概只能看到LOGO这样，要看到其它重点，就只好用两根手指头努力地放大缩小滑个不停了🙄 🙄

 

6.同样的网站，使用响应式网页技术制作之后，在手持装置上显示状态会是这样。和前两张图不同的是，网页里的物件在平板跟手机里就重新排排站了，在响应式的网页里，只要一根手指头慢慢往下滑，就能轻松浏览网页内容啰。

如何办到的？

 

7.首先我们先来了解一下网页中的几个主要物件，在电脑萤幕中的显示状态。

 

8.同样的网页物件在平板上显示时，透过响应式网页技术，在手持装置上，我们将所有物件改成了线性的排列，不让任一物件跑出萤幕的宽度(左右)之外。

除了改变物件的排列方式之外，由于手持装置显示范围有限，我们也会将多余的物件隐藏起来，让使用者浏览起来画面更清爽；把内文的字稍微加大，读起来让眼睛不会太辛苦。

使用响应式网页技术来制作网页，让所有人都能轻轻松松滑你的网站啰。😀 😀