響應式web設計對于解決多類型屏幕問題來說是個不錯方案，但從印刷的角度來看，其卻存在著很多的困難。沒有固定的頁面尺寸、沒有毫米或英寸，沒有任何物理限制，讓人感到無從下手。隨著建立網站可用的各種小工具越來越多，像素設計局限于桌面和移動端也已經成為歷史。因此，現在就讓我們來說明一下如何運用響應式web設計的各項基本原則來實現，而不是抗拒流暢的網頁體驗。為了簡單起見，我們將著重講布局，下面就由我們和大家講一講響應式網站設計的9項基本原則。

響應式網站設計
一、響應式設計Vs自適應網頁設計
看似相同實則不然。這兩種設計方式彼此相輔相成，所以說也沒有對錯之分。具體情況要依內容而定。

如(ru)果還不清楚，請瀏覽《響應式、自適應、液態(tai)和靜(jing)態(tai)網頁設計DEMO》

二、內容流

隨著屏幕尺寸越(yue)來(lai)越(yue)小，內(nei)容所占的(de)垂直空間也越(yue)來(lai)越(yue)多(duo)，也就(jiu)是說，內(nei)容會向下方(fang)延伸，這就(jiu)叫做內(nei)容流。如果你習慣了使用(yong)像素和(he)點進行設計(ji)，可能會覺得這個有點難(nan)掌握(wo)。不過(guo)沒關系，習慣了就(jiu)很(hen)好(hao)理解了。

三、相對單位

你的(de)設計(ji)對(dui)象可能是(shi)臺式桌(zhuo)面，也(ye)可能是(shi)移動端屏幕(mu)或者介于兩(liang)者之間的(de)任意屏幕(mu)類型。像素密度也(ye)會(hui)彼此不(bu)同，所(suo)以我(wo)們(men)需(xu)要使(shi)(shi)用靈活可變，并且能夠適應各(ge)種情況的(de)單位。那么在這種情況下，百分(fen)比(bi)等相對(dui)單位就(jiu)派上用場(chang)了。使(shi)(shi)用百分(fen)比(bi)時，我(wo)們(men)說寬度50%就(jiu)是(shi)表示寬度占(zhan)屏幕(mu)大小（或者叫(jiao)視區，也(ye)就(jiu)是(shi)指所(suo)打開瀏覽器窗口(kou)的(de)大小）的(de)一半。 

四、斷點

斷(duan)點可(ke)(ke)以讓頁面布局在預設(she)的(de)(de)點進(jin)行變形(xing)(xing)，也就是說，在臺式桌(zhuo)面上(shang)(shang)(shang)顯(xian)示(shi)3欄，在移動設(she)備(bei)上(shang)(shang)(shang)僅顯(xian)示(shi)1欄。大多數CSS屬(shu)性都(dou)可(ke)(ke)以實(shi)現斷(duan)點之間的(de)(de)變形(xing)(xing)。斷(duan)點放置(zhi)的(de)(de)位置(zhi)通常(chang)取決于內容(rong)(rong)。比如，如果一句話要(yao)換行，你可(ke)(ke)能就需(xu)要(yao)加上(shang)(shang)(shang)斷(duan)點。但斷(duan)點使用時需(xu)要(yao)謹(jin)慎(shen)——如果搞不(bu)清內容(rong)(rong)之間的(de)(de)邏輯關系，很容(rong)(rong)易弄的(de)(de)一團亂(luan)。

五、最大和最小值
有時候內容占滿整個屏幕寬度（例如在移動設備上）是好事，但如果相同的內容在電視屏幕上也撐得滿滿的，貌似就不太合理了。這就是為什么要有最大/最小值。例如，如果寬度為100%，最大寬度1000px，那么內容就會以不超過1000px的寬度填充屏幕。

六、套對象

還記得(de)相(xiang)對(dui)位置嗎？如(ru)果一大堆要(yao)素(su)(su)彼此都緊密聯系，那(nei)么必(bi)將難以控制(zhi)。因此，將要(yao)素(su)(su)放置到容(rong)器中就會讓它(ta)們(men)變(bian)得(de)更加好(hao)理解，并且(qie)簡潔明快(kuai)。這種(zhong)情(qing)況就需要(yao)用(yong)到像(xiang)素(su)(su)之類(lei)的(de)靜態(tai)(tai)單(dan)位了。靜態(tai)(tai)單(dan)位對(dui)于(yu)logo和(he)按鈕等(deng)不需要(yao)擴(kuo)展的(de)內容(rong)來(lai)說(shuo)非常有用(yong)。

七、移動優先還是臺式桌面優先

嚴格來(lai)說，項目從(cong)小(xiao)屏幕(mu)(mu)入手過渡(du)(du)到(dao)大(da)屏幕(mu)(mu)（移(yi)動優先(xian)），還是從(cong)大(da)屏幕(mu)(mu)入手過渡(du)(du)到(dao)小(xiao)屏幕(mu)(mu)（臺式桌面優先(xian)）區(qu)別不(bu)大(da)。但是，從(cong)移(yi)動端著手可以(yi)給(gei)你(ni)帶(dai)來(lai)一(yi)些額外的限制(zhi)，幫助你(ni)進行(xing)決(jue)策(ce)。通(tong)常(chang)情況下大(da)家會從(cong)兩方(fang)面同時著手，所以(yi)你(ni)還是要(yao)看哪種方(fang)式最適合你(ni)。

八、Web字體Vs系統字體

想(xiang)讓自(zi)己的(de)網站擁有(you)(you)炫酷的(de)Futura或Didot效果嗎？那就(jiu)是(shi)用web字(zi)體(ti)吧。盡管web字(zi)體(ti)看起來很炫酷，但(dan)你要(yao)記(ji)住，這(zhe)些字(zi)體(ti)都(dou)需要(yao)用戶下載，字(zi)越多(duo)，用戶加載頁面(mian)的(de)時(shi)間也就(jiu)越長。另一方面(mian)，系統字(zi)體(ti)加載速度則快得多(duo)（前提是(shi)用戶本機(ji)就(jiu)有(you)(you)），但(dan)太(tai)過(guo)普通。

九、位圖Vs矢量圖

你(ni)的圖(tu)(tu)(tu)標(biao)(biao)是(shi)否有(you)很(hen)多(duo)細(xi)節，并且應用(yong)了很(hen)多(duo)華麗的效果？如果是(shi)，那就用(yong)位圖(tu)(tu)(tu)。如果不(bu)(bu)是(shi)，考慮使(shi)用(yong)矢量圖(tu)(tu)(tu)。如果是(shi)位圖(tu)(tu)(tu)，使(shi)用(yong)jpg、png或gif。矢量圖(tu)(tu)(tu)則最(zui)好(hao)使(shi)用(yong)SVG或圖(tu)(tu)(tu)標(biao)(biao)字體。其各有(you)利(li)弊。但你(ni)要(yao)時(shi)刻牢記圖(tu)(tu)(tu)標(biao)(biao)尺寸——未經過優化的圖(tu)(tu)(tu)片(pian)不(bu)(bu)能傳到網(wang)上。另一方面(mian)，矢量圖(tu)(tu)(tu)通常比(bi)較(jiao)(jiao)小，不(bu)(bu)過部分比(bi)較(jiao)(jiao)老的瀏覽器可能不(bu)(bu)支(zhi)持矢量圖(tu)(tu)(tu)。還有(you)，如果圖(tu)(tu)(tu)標(biao)(biao)有(you)很(hen)多(duo)曲線，那有(you)可能會比(bi)位圖(tu)(tu)(tu)還大，所以要(yao)明智取舍(she)。

響(xiang)(xiang)應(ying)式(shi)(shi)網(wang)站設(she)(she)計(Responsive Web design)的(de)理念是：頁(ye)面的(de)設(she)(she)計與(yu)開發應(ying)當根據用(yong)(yong)戶行為以(yi)及設(she)(she)備(bei)環境(jing)(系統(tong)平臺、屏(ping)(ping)幕尺寸、屏(ping)(ping)幕定(ding)向等(deng))進行相(xiang)應(ying)的(de)響(xiang)(xiang)應(ying)和調(diao)整。具體的(de)實踐方式(shi)(shi)由(you)多方面組成，包括(kuo)彈(dan)性(xing)網(wang)格和布局(ju)、圖片(pian)、CSS media query的(de)使(shi)用(yong)(yong)等(deng)。無(wu)論(lun)用(yong)(yong)戶正在使(shi)用(yong)(yong)筆(bi)記本(ben)還(huan)是iPad，我們(men)(men)的(de)頁(ye)面都應(ying)該(gai)(gai)能(neng)夠自動切換(huan)分(fen)辨率、圖片(pian)尺寸及相(xiang)關腳(jiao)本(ben)功能(neng)等(deng)，以(yi)適應(ying)不同設(she)(she)備(bei)；換(huan)句話(hua)說，頁(ye)面應(ying)該(gai)(gai)有能(neng)力(li)去自動響(xiang)(xiang)應(ying)用(yong)(yong)戶的(de)設(she)(she)備(bei)環境(jing)。小伙伴們(men)(men)要想獲得更多響(xiang)(xiang)應(ying)式(shi)(shi)網(wang)站設(she)(she)計的(de)內容，請關注我們(men)(men)！

建站寶盒，作為15年老牌建站系統，2007年上線至今15年，一直在迭代更新，為超過50萬+企業提供建站服務。建站寶盒只做有用的網站，為企業用戶提供一站式企業服務，一個后臺管理所有站點內容，1000+成品模板，一鍵安裝套用，省心快捷。同時也不斷受到各大互聯網大廠的認可，成為騰訊云自營產品、華為云、百度云的戰略合作伙伴。歡迎來咨詢我們哦。