什么是RWD响应式网页设计?
Responsive Web Design
RWD网站就像是水(Fluid Layout),而电脑、手机等装置屏幕就是容器,水可以装在各种容器里,水也能自行去调节容器的大小尺寸
RWD响应式网页就像水一样,可以让网页装在多种容器里面
响应式网站英文是「Responsive Web Design」简称「RWD」,中文又称自适应、适应性或响应式网页设计,会有这么多不同的中文名称,是因为Responsive Web Design是因应智能型手机及平板而大量运用的优势技术,国外已经非常习惯用RWD技术设计网站。在2015年开始,我们也开始陆续开发制作RWD响应式网站。
[响应式网页是要「响应」什么呢?简单来说,响应式网页设计就是透过CSS3+JQuery网页技术,让手机、平板、电脑网站使用同一网站的图文内容及资料库,在不同尺寸或解析度的设备或屏幕上,网页代码会根据使用者的装置,以符合版面大小的样式来显示网页的内容。更简单地说,RWd网站技术让你可以只花一个网站的费用,让电脑、手机、平板都可以正常浏览同一个网站,再也不需要用手指在面板上放大、缩小。]
以上海骏东的网站为例,若您是使用电脑浏览网页,您看到的画面如下:
▼电脑屏幕宽度在1024像素以上的画面,可以呈现网站完整信息
如果您用的是iPad,界面稍有不同变化:
▲屏幕分辨率在768像素以下,网站顶部内容更换部分内容,顶部菜单改成下拉形式
如果您用的是手机,则原本左右编排的版型都会变成直条状,以便手机阅读。!屏幕分辨率宽度在400像素以下
所以不管屏幕分辨率变化如何,响应式网站都可以很灵活呈现,同时也让使用者在浏览网站时减少缩放、移动动作
为什么要做响应式网页Responsive Web Design?
因为越来越多人要用手机、平板浏览网页。手机上网的比例越来越高,这个现象不只出现在国内,而是全球皆如此。而以目前主流装置的分辨率来看,就有8种尺寸范围,因此要让每种装置都能顺畅浏览,不只考验工程师的功力,也非常考验前端网页设计的视觉美感,与后端多屏测试的耐性。