响应式网页设计是近几年来愈来愈被重视的网页制作技术,尤其在国发会表示政府官网将全面拥抱响应式网页设计,和google决议不支援手机浏览的网页,在手机的搜寻排序将大幅降低两则重要新闻发布之后,愈来愈多客户会在打电话来洽询的时候,指定网站一定要用响应式网页技术制作。
但是,究竟什么是响应式网页设计技术?我相信未接触过网页设计的民众对这名字一定还是很陌生,因此这篇文章,我们就试用最简易的图说,向各位说明什么是RWD响应式网页设计。
.
首先, 有几个大重点:
- RWD是Responsive Web Design 的缩写
- 中文说法是:响应式网页设计﹙过去也有人称做自适应网页设计?﹚
- 是因应上网装置愈来愈多元产生的网页制作技术
接下来,我们以下几张图片来做说明:
1. 电脑、笔电、平板、手机,不管是用3G、4G、WIFI、光世代还是ADSL拨接上网,这些是现代人家中几乎都有的上网设备,萤幕大大小小尺寸不一。
2. 常见上网装置的萤幕解析度,要注意的是现在的手机虽然画质愈来愈好,解析度愈来愈细致,但是硬体规格上讲的解析度,跟实际用手机浏览器上网的显示解析度意思不太一样喔。
3. 这是一个活动网站在电脑萤幕上的显示画面。
4. 如果未以响应式网页制作,同样的活动网站在平板上会这这样的显示状态。😯
5. 如果未以响应式网页制作,同样的活动网站在手机上会这这样的显示状态,大概只能看到LOGO这样,要看到其它重点,就只好用两根手指头努力地放大缩小滑个不停了🙄 🙄
6.同样的网站,使用响应式网页技术制作之后,在手持装置上显示状态会是这样。和前两张图不同的是,网页里的物件在平板跟手机里就重新排排站了,在响应式的网页里,只要一根手指头慢慢往下滑,就能轻松浏览网页内容啰。
如何办到的?
7.首先我们先来了解一下网页中的几个主要物件,在电脑萤幕中的显示状态。
8.同样的网页物件在平板上显示时,透过响应式网页技术,在手持装置上,我们将所有物件改成了线性的排列,不让任一物件跑出萤幕的宽度(左右)之外。
除了改变物件的排列方式之外,由于手持装置显示范围有限,我们也会将多余的物件隐藏起来,让使用者浏览起来画面更清爽;把内文的字稍微加大,读起来让眼睛不会太辛苦。
使用响应式网页技术来制作网页,让所有人都能轻轻松松滑你的网站啰。😀 😀
响应式网页设计是近几年来愈来愈被重视的网页制作技术,尤其在国发会表示政府官网将全面拥抱响应式网页设计,和google决议不支援手机浏览的网页,在手机的搜寻排序将大幅降低两则重要新闻发布之后,愈来愈多客户会在打电话来洽询的时候,指定网站一定要用响应式网页技术制作。
但是,究竟什么是响应式网页设计技术?我相信未接触过网页设计的民众对这名字一定还是很陌生,因此这篇文章,我们就试用最简易的图说,向各位说明什么是RWD响应式网页设计。
.
首先, 有几个大重点:
- RWD是Responsive Web Design 的缩写
- 中文说法是:响应式网页设计﹙过去也有人称做自适应网页设计?﹚
- 是因应上网装置愈来愈多元产生的网页制作技术
接下来,我们以下几张图片来做说明:
1. 电脑、笔电、平板、手机,不管是用3G、4G、WIFI、光世代还是ADSL拨接上网,这些是现代人家中几乎都有的上网设备,萤幕大大小小尺寸不一。
2. 常见上网装置的萤幕解析度,要注意的是现在的手机虽然画质愈来愈好,解析度愈来愈细致,但是硬体规格上讲的解析度,跟实际用手机浏览器上网的显示解析度意思不太一样喔。
3. 这是一个活动网站在电脑萤幕上的显示画面。
4. 如果未以响应式网页制作,同样的活动网站在平板上会这这样的显示状态。😯
5. 如果未以响应式网页制作,同样的活动网站在手机上会这这样的显示状态,大概只能看到LOGO这样,要看到其它重点,就只好用两根手指头努力地放大缩小滑个不停了🙄 🙄
6.同样的网站,使用响应式网页技术制作之后,在手持装置上显示状态会是这样。和前两张图不同的是,网页里的物件在平板跟手机里就重新排排站了,在响应式的网页里,只要一根手指头慢慢往下滑,就能轻松浏览网页内容啰。
如何办到的?
7.首先我们先来了解一下网页中的几个主要物件,在电脑萤幕中的显示状态。
8.同样的网页物件在平板上显示时,透过响应式网页技术,在手持装置上,我们将所有物件改成了线性的排列,不让任一物件跑出萤幕的宽度(左右)之外。
除了改变物件的排列方式之外,由于手持装置显示范围有限,我们也会将多余的物件隐藏起来,让使用者浏览起来画面更清爽;把内文的字稍微加大,读起来让眼睛不会太辛苦。
使用响应式网页技术来制作网页,让所有人都能轻轻松松滑你的网站啰。😀 😀
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/courses/260579.html