什么是響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站的概念是2010年5月由國外著名網(wǎng)頁設(shè)計師Ethan Marcotte所提出的，其理念是頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。響應(yīng)式網(wǎng)站的頁面制作設(shè)計應(yīng)根據(jù)設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸)推進(jìn)相應(yīng)的響應(yīng)和調(diào)整，也就是說響應(yīng)式Web設(shè)計是一種技能，能夠使網(wǎng)站適應(yīng)于任何設(shè)備。即臺式電腦、筆記本電腦、平板電腦、移動使用等不一樣的設(shè)備所見到的內(nèi)容是不一樣的。 包含橫向、縱向的屏幕。而針對響應(yīng)式設(shè)計的背景則是由于客戶對智能移動手機(jī)的青睞日漸升溫，人們對移動手機(jī)端的客戶體驗要求也相應(yīng)提升，那就必須有一個響應(yīng)式的Web設(shè)計，以便能夠從移動終端上很好地訪問你的網(wǎng)站。

自適應(yīng)網(wǎng)站與響應(yīng)式網(wǎng)站的區(qū)別

自適應(yīng)網(wǎng)站是使用不同設(shè)備瀏覽時呈現(xiàn)不同的網(wǎng)頁，網(wǎng)頁內(nèi)容及版式風(fēng)格或相似或完全不同，和PC端屬于不同的網(wǎng)站模板，數(shù)據(jù)庫內(nèi)容或相同一致，或獨(dú)立不同，目的在于為了符合訪客的瀏覽。針對一些優(yōu)化人員，更習(xí)慣于做到數(shù)據(jù)庫同步，使PC端的網(wǎng)址和內(nèi)容與移動端的網(wǎng)址和內(nèi)容一一對應(yīng)。

響應(yīng)式網(wǎng)站是使用不同的設(shè)備瀏覽網(wǎng)站時，網(wǎng)站樣式風(fēng)格、內(nèi)容和網(wǎng)址都是完全一樣的，PC端和移動端屬于同一個網(wǎng)站模板，數(shù)據(jù)庫完全一致，也非常符合搜索引擎的優(yōu)化規(guī)則。

為什么需要響應(yīng)式web設(shè)計

由于目前移動設(shè)備的大批運(yùn)用，以及PC表現(xiàn)器的尺寸逐漸顯現(xiàn)較大差別，以前的的web頁面已經(jīng)不能滿足多種設(shè)備的閱讀效果，例如以前的頁面在大閱讀器中會有較大的空白區(qū)域，而在小閱讀器已經(jīng)移動設(shè)備中，不能完全表現(xiàn)頁面，或是將頁面縮小至適應(yīng)移動設(shè)備尺寸大小，不能正常閱讀，對于點(diǎn)擊觸點(diǎn)也有作用，很多人會選取放大頁面，在推進(jìn)閱讀，這樣整個頁面就需要不停的拖動，給客戶的體驗很不好。

響應(yīng)式網(wǎng)站是以后公司企業(yè)網(wǎng)站必然的成長發(fā)展方向，不論客戶正在運(yùn)用筆記本依然是iPad，我們的頁面都應(yīng)當(dāng)滿足自動切換分辨率、照片圖片大小及相關(guān)聯(lián)腳本功能等，以適應(yīng)不一樣設(shè)備；也就是說，頁面應(yīng)當(dāng)有能力去自動響使用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁開發(fā)設(shè)計就是一個網(wǎng)站滿足兼容多個終端而不是為每個終端做一個特定的版本。

響應(yīng)式界面設(shè)計的基本原則

1、可伸縮的內(nèi)容區(qū)塊：內(nèi)容區(qū)塊的在一定程度上能夠自動調(diào)整，以確保填滿整個頁面

2、可自由排布的內(nèi)容區(qū)塊：當(dāng)頁面尺寸變動較大時，能夠減少/增加排布的列數(shù)

3、適應(yīng)頁面尺寸的邊距：到頁面尺寸發(fā)生更大變化時，區(qū)塊的邊距也應(yīng)該變化

4、能夠適應(yīng)比例變化的圖片：對于常見的寬度調(diào)整，圖片在隱去兩側(cè)部分時，依舊保持美觀可用

5、能夠自動隱藏/部分顯示的內(nèi)容：如在電腦上顯示的的大段描述文本，在手機(jī)上就只能少量顯示或全部隱藏

6、能自動折疊的導(dǎo)航和菜單：展開還是收起，應(yīng)該根據(jù)頁面尺寸來判斷

7、放棄使用像素作為尺寸單位：用dp尺寸等方法來確保頁面在分辨率相差很大的設(shè)備上，看起來也能保持一致。同時也要求提供的圖片應(yīng)該比預(yù)想的更大，才能適應(yīng)高分辨率的屏幕。