Station building knowledge

                建站知識

                揚州網站建設淺談響應式網站的優勢

                2019-10-13
                292次

                  響應式網站設計(Responsive Web Design簡稱RWD)這個術語,由伊桑?馬科特(Ethan Marcotte)提出。他在A List Apart 發表了一篇開創性的文章,將三種已有的開發技術(彈性網格、彈性圖片、媒體查詢)整合起來,并命名為響應式網頁設計。

                  響應式網站設計應根據用戶使用的設備的分辨率大小進行相應的響應與調整,大限度滿足不同設備用戶體驗需求。響應式網站設計就是一個網站能夠兼容多個終端,不需要為每個終端做一個特定的版本。簡單地理解:一個響應式網站=phone端網站+pad端網站+電腦端網站。具體的實現方式由多方面決定,包括彈性網格、彈性圖片、CSS媒體查詢(media query)的使用等。

                  揚州網站建設淺談響應式網站的優勢

                  優點:

                  1:用戶體驗友好 隨著電腦尺寸多元化,智能設備(pad/智能手機)普及化,在當下追求用戶體驗至上的時代(2016年),之前網站普遍使用固定的寬度(960px)逐漸滿足不了現在不同設備與不同分辨率需求。在高分辨率電腦寬屏顯示器上,兩邊留白過多。在手機上顯示,內容顯示過小,用戶為了看清楚,首先需要放大界面,再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境,自動調整界面布局、展示內容、內容大小,提供非常好視覺展示效果,一致性友好體驗。

                  2:節省設計開發成本 相對需要開發電腦網站、pad網站、手機網站來說,響應式網站式節省設計開發成本的。從設計角度說,一般來說,響應式網站界面只需要設計兩套設計效果圖就行了,電腦端與pad端基本可以共用一套設計效果圖,手機端重新設計一套就可以了;從前端開發角度說,再不需要開發三套完成不一樣的前端代碼,只需要根據臨界點(如果是基于Bootstrap前端框架進行開發,它上面有明確說明,這個問題下回再和大家分享)為不同終端開發三套不同的css樣式;從后期維護角度來說,再不需要分別維護pc界面、pad界面、移動界面,專心維護一個網站即可。

                  3:SEO友好 由于H5響應式網站在不同終端有友好的界面展示效果,用戶可以與網站一直保持聯系,比如URL不變積累分享;通過單一的URL地址收集所有的社交分享鏈接佳化搜索用引擎。搜索引擎也在變得越來越聰明,它們足夠智能可以完成移動網站和桌面網站的連接。Google也建議優先采用響應式設計,因為無論是什么網頁版本都是相同的HTML、相同的內容,Google容易處理。

                  H5響應式網站圖片技術思想:不僅要同比的縮放圖片,還要在小設備上降低圖片自身的分辨率。這個技術的實現需要使用幾個相關文件,我們可以在Github上獲取。包括一個JavaScript文件(rwd-images.js),一個.htaccess文件,以及一些范例資源文件。大致的原理是,rwd-images.js會檢測當前設備的屏幕分辨率,如果是大屏幕設備,則向頁面head部分中添加BASE標記,并將后續的圖片、腳本和樣式表加載請求定向到一個虛擬路徑"/rwd-router"。當這些請求到達服務器端,.htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應式圖片",并進行相應的反饋輸出。對于小屏幕的移動設備,原始尺寸的大圖片永遠不會被用到。

                  揚州網站建設

                  響應式設計在2012年被提的比較多,但是響應式設計仍然在不斷變化,不斷創新。比如,新的設備不斷出來(iPad Mini),這讓以前的設計想法土崩瓦解。而各種Web的響應式設計也獲得了越來越多的注意,“讓人們忘記設備尺寸”的理念將更快地驅動響應式設計,所以Web設計也將迎來更多的響應式設計元素。

                標簽

                欧美大胆a级视频