|
響應式網站設計是一種(zhǒng)網絡頁面(miàn)設計布局，其理念是：集中創建頁面(miàn)的圖片排版大小，可以智能(néng)地根據用戶行爲以及使用的設備環境進(jìn)行相對(duì)應的布局。
一、響應式網站設計(ResponsiveWebdesign)的理念
頁面(miàn)的設計與開(kāi)發(fā)應當根據用戶行爲以及設備環境(系統平台、屏幕尺寸、屏幕定向(xiàng)等)進(jìn)行相應的響應和調整。具體的實踐方式由多方面(miàn)組成(chéng)，包括彈性網格和布局、圖片、CSSmediaquery的使用等。無論用戶正在使用筆記本還(hái)是iPad，我們的頁面(miàn)都(dōu)應該能(néng)夠自動切換分辨率、圖片尺寸及相關腳本功能(néng)等，以适應不同設備；換句話說(shuō)，頁面(miàn)應該有能(néng)力去自動響應用戶的設備環境。響應式網頁設計就(jiù)是一個網站能(néng)夠兼容多個終端——而不是爲每個終端做一個特定的版本。這(zhè)樣，我們就(jiù)可以不必爲不斷到來的新設備做專門的版本設計和開(kāi)發(fā)了。
二、響應式網站技術特點
1、一切彈性化。我們通過(guò)響應式的設計和開(kāi)發(fā)思路讓頁面(miàn)更加"彈性"了。圖片的尺寸可以被自動調整，頁面(miàn)布局再不會(huì)被破壞。雖然永遠沒(méi)有最合适的解決方案，但它給了我們更多選擇。無論用戶切換設備的屏幕定向(xiàng)方式，還(hái)是從台式機屏幕轉到iPad上浏覽，頁面(miàn)都(dōu)會(huì)真正的富有彈性。
通過(guò)液态網格和液态圖片技術，并且在正确的地方使用了正确的HTML标記。
2、響應式圖片。響應式圖片技術思想：不僅要同比的縮放圖片，還(hái)要在小設備上降低圖片自身的分辨率。這(zhè)個技術的實現需要使用幾個相關文件，我們可以在Github上獲取。包括一個JavaScript文件(rwd-images.js)，一個.htaccess文件，以及一些範例資源文件。大緻的原理是，rwd-images.js會(huì)檢測當前設備的屏幕分辨率，如果是大屏幕設備，則向(xiàng)頁面(miàn)head部分中添加BASE标記，并將(jiāng)後(hòu)續的圖片、腳本和樣式表加載請求定向(xiàng)到一個虛拟路徑"/rwd-router"。當這(zhè)些請求到達服務器端，.htacces文件會(huì)決定這(zhè)些請求所需要的是原始圖片還(hái)是小尺寸的"響應式圖片"，并進(jìn)行相應的反饋輸出。對(duì)于小屏幕的移動設備，原始尺寸的大圖片永遠不會(huì)被用到。
本站關鍵詞：濰坊網站建設 濰坊網站設計 濰坊網站制作 |
