响应式网页设计

响应式网页设计为符合行动装置的浏览,也称为自适应网页设计、回应式网页设计。由英语Responsive Web Design翻译而来缩写RWD是一种网页制做方法的技术,这技术被公认于2013年网页开发技术的重要进程,可以让企业网站在多种浏览装置如桌上型电脑、行动电话、行动平板装置显示器上自适应其版面阅读,不管萤幕解析度尺寸变化如何,网页内容可以对应不同的解析度,而有不同的呈现方式,网站可以很灵活的呈现,也浏览者在观看网站内容时减少缩放、移动和捲动之便利性。

随着智慧型手机、行动平板装置的普及且随即可上网查询资讯的方便,网页的制做技术来也开始重视行动装置上的阅读上的灵活呈现效果。Google公司亦表示搜寻在决定排名时,会一併考虑行动浏览的便利性。这项调整影响遍及全球所有语言的行动搜寻,也会对Google搜寻结果产生重大影响。于是回应式网页设计自然被视为未来网页设计的趋势。


CSS3 Media Queries

网站开发技术使用CSS3 Media Queries方式,以自适应的弹性版面规划设计,在不同解像度下改变网页版面之佈局对应方法,让不同的设备都可以很灵活提供最佳浏览。

@media screen and (max-device-width:480px) {当萤幕解析度尺寸小于 480px 採用该区段的设置}

网页标头Viewport设定

viewport" content="width=device-width, initial-scale=1.0" />

网页的标头Viewport设定,让不同的显示设备、行动装置的萤幕解析度尺寸来符合最佳浏览。如果没有该设定的情况,会依原本网页整个缩小来符合显示设备。比较起早期的手机版网页开发都是与电脑版的网站区隔开来另外再制做,导致制做上的麻烦及成本的增加且管理上更新网页内容时就必须要更新两次的问题。虽然多了灵活呈现上的版面规划但还是有一定的优势。


RWD工业网站整理(网页设计案例)

//www.zzxcfjddb.com/Mechanics/




RWD资源连结及参考资料

http://alistapart.com/article/responsive-web-design

http://mediaqueri.es/

http://www.flashuser.net/responsive-web-design-tutorials

https://developer.mozilla.org/.../CSS/Media_queries