響應式網頁設計(Responsive Web Design簡稱RWD)這個術語,由伊桑·馬科特(Ethan Marcotte)提出。他在A List Apart發表了一篇開創性的文章,將三種已有的開發技術(彈性網格、彈性圖片、媒體查詢)整合起來,並命名為響應式網頁設計。
響應式網站設計應根據用戶使用的設備的分辨率大小進行相應的響應與調整,最大限度滿足不同設備用戶體驗需求。
響應式網站設計就是一個網站能夠兼容多個終端,不需要為每個終端做一個特定的版本。簡單地理解:一個響應式網站=手機端網站+pad端網站+PC端網站。具體的實現方式由多方麵決定,包括彈性網格、彈性圖片、CSS媒體查詢(media query)的使用等。
彈性網格(flexible grids)
可基於屏幕分辨率擴展或拉伸內容。
彈性圖片(flexible grids)
在小屏幕上可縮小尺寸,並可擴展至最大尺寸以支持大屏幕。
媒體查詢(media queries)
是放在站點HTML和樣式表種的代碼段,用來收集設備顯示能力的信息以支持多種形式的界麵。
響應式網站的優點:
1、用戶體驗友好
隨著電腦尺寸多元化,智能設備(pad/智能手機)普及化,在當下追求用戶體驗至上的時代,之前網站普遍使用固定的寬度(960px)逐漸滿足不了現在不同設備與不同分辨率需求。在高分辨率電腦寬屏顯示器上,兩邊留白過多。在手機上顯示,內容顯示過小,用戶為了看清楚,首先需要放大界麵,再左右拖拖界麵。響應式網站可以根據不同終端、不同尺寸和不同應用環境,自動調整界麵布局、展示內容、內容大小,提供非常好視覺展示效果,一致性友好體驗。
2、節省設計開發成本
相對需要開發電腦網站、pad網站、手機網站來說,響應式網站節省設計開發成本的。
從設計角度說,一般來說,響應式網站界麵隻需要設計兩套設計效果圖就行了,電腦端與pad端基本可以共用一套設計效果圖,手機端重新設計一套就可以了;
從前端開發角度說,再不需要開發三套完成不一樣的前端代碼,隻需要根據臨界點為不同終端開發三套不同的CSS樣式;
從後期維護角度來說,再不需要分別維護pc界麵、pad界麵、移動界麵,專心維護一個網站即可。
3、SEO友好
由於響應網站在不同終端有友好的界麵展示效果,用戶可以與網站一直保持聯係,比如URL不變積累分享;通過單一的URL地址手機所有的社交分享鏈接最佳化搜索引擎。搜索引擎也在變得越來越聰明,它們足夠智能可以完成移動網站和桌麵網站的鏈接。Google也建議優先采用響應式設計,因為無論是什麽網頁版本都是相同的HTML、相同的內容,Google最容易處理。
響應式網站的缺點:
1、對老版IE兼容性不友好
對於老版本IE(IE6、IE7、IE8)支持不好,這是一個致命的問題,如果你的網站用戶大多還采用老版本的IE的話,建議不做響應式網站。
2、靈活性有所欠缺
基於不同終端的設備屬性不同,對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計,如:電商類型網站,寬屏的PC端內容如果全部要在手機端進行展示,勢必導致手機端的界麵非常長,需要根據手機端屬性進行重新信息框架設計,這樣對響應網站要求非常高,實現難度與成本非常高。但是大型網站為了提高用戶體驗,通常做法,把高分辨率寬屏網站最小的響應尺寸響應到1024px,不再適配手機端,手機端重新設計開發一套手機網站,簡單理解為2.5響應,如:電商網站亞馬遜,Calvin Klein、Nike、視頻網站Youtube等。
3、速度可能會變慢
由於響應式頁麵是同時下載多套CSS樣式代碼,可能在手機上就下載PC、pad的冗餘代碼,導致文件變大,影響加載速度。不過CSS樣式的代碼占用內存相對圖片來說不算大,所以如果前端編程處理得好前提之下,這就不會影響網站加載速度。
四川j9九游会真人游戏第一品牌官网科技有限責任公司企業給與企業官網基本建設設計開發(含APP)、著名品牌谘詢策劃方案、品牌推廣推廣營銷等大數據技術全用戶價值一體化服務。重要卓越團隊由大數據技術技術專業工作人員和營銷專業工作人員構成,具有10年係統設計開發工作經曆,6年品牌推廣實際個股股票操盤工作經曆。
四川j9九游会真人游戏第一品牌官网——互聯網全價值鏈一體化服務商,互聯網綜合服務“實戰派”!依托深厚的係統研發實力,豐富 的營銷推廣操盤經驗。
四川j9九游会真人游戏第一品牌官网科技核心團隊近幾年成功的操盤了多家互聯網企業,伴隨企業網站從0到1,品牌從0到1,用戶從0 到1,並迅速成為各“細分領域”領導品牌!我們幫助企業進行品牌診斷,提出精準的營銷定位,並通過強 大的整合營銷資源,幫助品牌跳出同質化競爭,獲得強勁的市場競爭力!