更新時間:2023-03-27 來源:黑馬程序員 瀏覽量:
越來越多的人使用小屏幕設(shè)備上網(wǎng),針對不同屏幕的設(shè)備開發(fā)不同的頁面成本非常大,這時,響應(yīng)式Web 設(shè)計應(yīng)運(yùn)而生。響應(yīng)式 Web 設(shè)計(Responsive
Web Design)是由Ethan Marcotte在2010年提出的,他將媒體查詢、柵格布局和彈性圖片合并稱為響應(yīng)式Web設(shè)計。
1.設(shè)計理念
從設(shè)計理念看,響應(yīng)式Web設(shè)計是一種針對任意設(shè)備對網(wǎng)頁內(nèi)容進(jìn)行完美布局的顯示方式,與原始設(shè)計方式相比有以下兩點(diǎn)突破。
(1)一個網(wǎng)頁設(shè)計,多個設(shè)備使用
隨著移動產(chǎn)品的日益豐富,出現(xiàn)了各種屏幕尺寸的手機(jī)、Pad等移動設(shè)備,而針對每一種尺寸的設(shè)備都獨(dú)立開發(fā)一個網(wǎng)站,成本會非常高,如果要找一個成本、設(shè)計、性能的平衡點(diǎn),響應(yīng)式設(shè)計是最好的選擇。它可以做到一處設(shè)計,響應(yīng)多種屏幕。
(2)移動優(yōu)先
以前的網(wǎng)站開發(fā)大多數(shù)是先開發(fā)PC端,再根據(jù)PC端的網(wǎng)頁及功能設(shè)計開發(fā)移動端。然而,隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展,使用移動端上網(wǎng)的用戶群已經(jīng)趕超PC端。由于移動端設(shè)備的屏幕小、計算資源低,如果我們先開發(fā)移動端,再開發(fā)PC端,可以迫使開發(fā)人員在更小、計算資源更低的設(shè)備中設(shè)計產(chǎn)品功能。這樣做,一是可以使產(chǎn)品功能更加核心和簡潔,二是有助于設(shè)計出性能更高的程序。
2.用戶體驗
用戶體驗對于網(wǎng)站的運(yùn)營是至關(guān)重要的,網(wǎng)站如果沒有良好的用戶體驗,那么就算里面的內(nèi)容再精彩,用戶也無心瀏覽下去。通常,網(wǎng)站會在移動瀏覽器上縮放,這樣雖然可以完整地給我們呈現(xiàn)想要瀏覽的內(nèi)容,但鑒于移動設(shè)備屏幕大小的限制,過多的內(nèi)容會使頁面看起來雜亂不堪,用戶也很難找到自己關(guān)注的內(nèi)容。而響應(yīng)式Web設(shè)計并不是將整個網(wǎng)頁縮放給用戶,而是經(jīng)過精心篩選,有選擇性地顯示頁面的內(nèi)容。