隨著智能手機(jī)和平板電腦取代PC成為人們的主流上網(wǎng)設(shè)備，屏幕適配設(shè)計(jì)，或者說屏幕響應(yīng)式設(shè)計(jì)（responsive design）已經(jīng)成為新聞和電商網(wǎng)站的熱門趨勢(shì)之一，IDC公布的移動(dòng)開發(fā)者調(diào)查顯示：開發(fā)者在選擇移動(dòng)平臺(tái)時(shí)，首次將平板電腦放到與智能手機(jī)同等重要的地位。

屏幕適配設(shè)計(jì)的本質(zhì)是移動(dòng)web網(wǎng)站，相比原生移動(dòng)應(yīng)用具有跨平臺(tái)、跨終端、無需安裝應(yīng)用、快速部署等優(yōu)點(diǎn)。（編者按：但很多情況下，開發(fā)者應(yīng)當(dāng)意識(shí)到：HTML5的開發(fā)難度和成本會(huì)比原生應(yīng)用還要高，參考閱讀：Xero，我們放棄HTML5的原因）

但是關(guān)于如何進(jìn)行屏幕適配設(shè)計(jì)，以及屏幕適配設(shè)計(jì)的關(guān)鍵步驟、關(guān)鍵規(guī)則和關(guān)鍵元素等話題則是眾說風(fēng)云。最近WhoisHostingThis.com對(duì)屏幕適配進(jìn)行了結(jié)構(gòu)，并制作了如下的信息圖：

其中的關(guān)鍵信息包括：

屏幕適配設(shè)計(jì)在開發(fā)階段有三大技術(shù)元素：流動(dòng)卡片（按照比例與屏幕尺寸排列匹配）、伸縮圖片（圖片有多個(gè)尺寸與不同元素框匹配）和終端匹配（根據(jù)瀏覽器顯示尺寸匹配對(duì)應(yīng)的CSS規(guī)則）

電商網(wǎng)站屏幕適配設(shè)計(jì)實(shí)現(xiàn)最佳用戶體驗(yàn)的五大關(guān)鍵設(shè)計(jì)要素：

1.主欄頭（醒目的同時(shí)盡量窄些，將注意力留給核心內(nèi)容，突出搜索框）

2.相冊(cè)（讓產(chǎn)品圖片成為視覺焦點(diǎn)，嘗試輕量級(jí)腳本Swipe.js創(chuàng)建可以滑動(dòng)的圖片欄，這對(duì)智能手機(jī)和平板電腦用戶來說滑動(dòng)操作會(huì)產(chǎn)生更加友好的操作體驗(yàn)）

3.產(chǎn)品描述（產(chǎn)品簡(jiǎn)介、評(píng)星、評(píng)論、社交分享按鈕、購物車等按鈕）

4.附屬信息（相關(guān)產(chǎn)品、產(chǎn)品評(píng)論、）

5.頁尾（回到頂部按鈕）