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

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

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

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

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

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

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

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

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

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

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