響應式設計
目前非常流行自適應設計與響應式設計，而且經(jīng)常讓人混淆，自適應設計不應與自適應布局混為一談，它們是完全不一樣的概念。
在這先說明下這兩者的異同：
自從移動終端飛速發(fā)展以來，各種各樣的機型突飛猛進，很多網(wǎng)站的解決方法，是為不同的設備提供不同的網(wǎng)頁，比如專門提供一個mobile版本，或者iPhone/iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設計的復雜度。
于是，很早就有人設想，能不能"一次設計，普遍適用"，讓同一張網(wǎng)頁自動適應不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局（layout）？
2010年，Ethan Marcotte提出了"自適應網(wǎng)頁設計"（Responsive Web Design）這個名詞，指可以自動識別屏幕寬度、并做出相應調(diào)整的網(wǎng)頁設計。

如圖所示就叫做自適應布局。自適應布局有它的使用價值，在于它能夠提供一種更加實用的解決方案，使得項目的實現(xiàn)成本更低，并且更加易于測試。一個自適應布局可以被看作是響應式布局的一個更加廉價的替代品，會在項目資源緊缺的情況下更具有吸引力。
而在響應式布局中你卻要考慮上百種不同的狀態(tài):
響應式網(wǎng)頁設計是自適應網(wǎng)頁設計的子集。響應式網(wǎng)頁設計指的是頁面的布局（流動網(wǎng)格、靈活的圖像及媒介查詢）。總體目標就是去解決設備多樣化問題。
響應式布局等于流動網(wǎng)格布局，而自適應布局等于使用固定分割點來進行布局。
當固定寬度與流動寬度結(jié)合起來時，自適應布局就是一種響應式設計，而不僅僅是它的一種替代方法。​

背景
PC互聯(lián)網(wǎng)加速向移動端遷移；
移動端入口：當用戶希望通過手機來完成PC頁的操作時，常見的是商家的運營微博，期文案足夠吸引用戶點擊鏈接參加活動，如果該活動頁沒做響應式處理：頁面體積大、請求多、體驗差、兼容性差，層層阻礙最終導致用戶放棄參加。

優(yōu)勢
開發(fā)成本低，門檻低
Native APP：Objective-C or Java – 學習成本高
Hybrid APP： 外殼+Web APP，需安裝。
響應式Web APP：HTML5+JS+CSS – 門檻低，極易上手，迭代快
跨平臺和終端且不需要分配子域
雖然可通過監(jiān)測用戶UA來判斷用戶終端后做跳轉(zhuǎn)，但它還是分配了多個域，而響應式無需監(jiān)測用戶UA沒有域的切換，只需根據(jù)終端類型來適配不同的功能模塊與表現(xiàn)樣式，它是跨平臺和終端的，1頁面適配多終端。

技巧
那么如何進行響應式布局呢？下面就一步步為你揭開響應式布局的面紗：
Skill 1 學會運用 Css3 Media Queries，根據(jù)不同的屏幕分辨率，選擇應用不同的Css規(guī)則
Media Queries語法簡介：
max-width：若瀏覽區(qū)域的寬度小于400像素，則下方的CSS描述就會立即被套用：

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表