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

响应式网站建设

响应式网站建设

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

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

 .

首先, 有几个大重点:

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

 

接下来,我们以下几张图片来做说明:

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

如何办到的?

 

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

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

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

响应式网站建设

响应式网站建设

响应式网站建设

响应式网站建设

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

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

 .

首先, 有几个大重点:

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

 

接下来,我们以下几张图片来做说明:

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

如何办到的?

 

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

响应式网站建设

响应式网站建设

 

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

响应式网站建设

响应式网站建设

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

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

响应式网站建设

响应式网站建设

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/courses/260579.html

(0)
上一篇 2022年5月24日 02:07
下一篇 2022年5月24日 02:08

相关推荐

发表回复

登录后才能评论