RWD響應式網頁設計對於解決多尺寸屏幕問題是個很好的解決方案，從平麵的角度切入需克服很多困難，沒有固定的頁麵尺寸、沒有毫米或英寸，沒有任何限製會讓人感到無從下手。隨著建立網站的小工具越來越多， 網頁設計若隻局限於電腦版或手機版已不在適用。因此我們來厘清，如何運用RWD響應式網頁設計的各項基本原則，來建立一個流暢的網頁。為了簡單起見，我們將著重於布局。
響應式網頁設計(Responsive) Vs 自適應網頁設計(Adaptive)
這兩種設計方式彼此相輔相成沒有對錯之分，具體情況要依內容而定。
內容流
wangyesuizhepingmuchicunyuelaiyuexiao，neirongsuozhandechuizhikongjianyeyuelaiyueduo，yejiushishuowangyeneironghuixiangxiafangyanshen，zhejiujiaozuoneirongliu。ruguoyixiguanleshiyongxiangsuhedianjinxingsheji，kenenghuijiaodezhegeyoudiannanzhangwo。buguomeiguanxi，xiguanlejiuhenhaolijiele。
相對位置 Relative units
使(shi)用(yong)者(zhe)的(de)網(wang)頁(ye)顯(xian)示(shi)器(qi)可(ke)能(neng)是(shi)桌(zhuo)機(ji)屏(ping)幕(mu)，也(ye)可(ke)能(neng)是(shi)行(xing)動(dong)裝(zhuang)置(zhi)或(huo)者(zhe)介(jie)於(yu)兩(liang)者(zhe)之(zhi)間(jian)任(ren)何(he)的(de)顯(xian)示(shi)器(qi)。像(xiang)素(su)的(de)須(xu)跟(gen)隨(sui)屏(ping)幕(mu)尺(chi)寸(cun)改(gai)變(bian)，因(yin)而(er)需(xu)要(yao)靈(ling)活(huo)能(neng)夠(gou)適(shi)應(ying)各(ge)種(zhong)情(qing)況(kuang)的(de)單(dan)位(wei)。百(bai)分(fen)比(bi)相(xiang)對(dui)單(dan)位(wei)就(jiu)很(hen)好(hao)運(yun)用(yong)，寬(kuan)度(du)50%就是表示寬度占瀏覽器視窗大小的一半。
截斷點 Breakpoints
斷點可以讓網頁版麵布局在預設的點進行變形，也就是說，在桌機網頁上顯示3欄，在移動裝置網頁上僅顯示1欄。大多數CSS屬(shu)性(xing)都(dou)可(ke)以(yi)實(shi)現(xian)斷(duan)點(dian)之(zhi)間(jian)的(de)變(bian)形(xing)。斷(duan)點(dian)放(fang)置(zhi)的(de)位(wei)置(zhi)通(tong)常(chang)取(qu)決(jue)於(yu)網(wang)頁(ye)內(nei)容(rong)。比(bi)如(ru)一(yi)句(ju)話(hua)要(yao)換(huan)行(xing)，可(ke)能(neng)就(jiu)需(xu)要(yao)加(jia)上(shang)斷(duan)點(dian)。但(dan)斷(duan)點(dian)使(shi)用(yong)時(shi)需(xu)要(yao)謹(jin)慎(shen)，如(ru)果(guo)搞(gao)不(bu)清(qing)內(nei)容(rong)之(zhi)間(jian)的(de)邏(luo)輯(ji)關(guan)係(xi)，很(hen)容(rong)易(yi)弄(nong)的(de)一(yi)團(tuan)亂(luan)。
最大和最小值 Max width
在行動裝置有時網頁內容占滿整個屏幕寬度，但如果相同的網頁內容在桌機屏幕上也撐得滿滿的，版麵就不太適當。因而有寬度最大/最小值的設定。例如行動裝置寬度為100%，最大寬度1000px，大屏幕的內容就會以不超過1000px。
巢狀物件 Nested objects
如(ru)果(guo)網(wang)頁(ye)很(hen)多(duo)元(yuan)素(su)彼(bi)此(ci)都(dou)要(yao)互(hu)相(xiang)關(guan)連(lian)將(jiang)難(nan)以(yi)控(kong)製(zhi)。因(yin)此(ci)將(jiang)元(yuan)素(su)放(fang)置(zhi)到(dao)容(rong)器(qi)中(zhong)就(jiu)會(hui)讓(rang)它(ta)們(men)變(bian)得(de)更(geng)好(hao)管(guan)理(li)，並(bing)且(qie)簡(jian)潔(jie)明(ming)快(kuai)。靜(jing)態(tai)單(dan)位(wei)像(xiang)是(shi)像(xiang)素(su)，對(dui)於(yu)是(shi)否(fou)要(yao)縮(suo)放(fang)的(de)內(nei)容(rong)很(hen)有(you)用(yong)，如(ru) logo 跟按鈕。
移動優先還是桌機優先 Mobile or Desktop first
網頁從小屏幕轉到大屏幕（移動優先），還是從大屏幕轉到小屏幕（桌機優先）區別不大。如果以行動端優先， 在網頁設計上會多一些需考量的限製。通常兩方麵同時著手，所以還是必須考慮網頁使用者習慣與市場。
網頁字體 vs 係統字體 Webfonts vs System fonts
wangyezitihenduoyuan，danzhexiezitidouxuyaozairushijian，ziyueduozairuyemiandeshijianyejiuyuechang。xitongzitijiazaisuduzekuaideduo，shiyongzhebenjijiuyouneijianzhexiezixing。
點陣圖 vs 向量圖 Bitmap images vs Vectors
你的圖片是否有很多細節，並且應用了很多華麗的效果？如果是，那就用點陣圖。如果不是，考慮使用向量圖。如果是點陣圖，使用jpg、png 或 gif。向量圖則使用 SVG huotubiaoziti。danbixuzhuyidangandedaxiao，weijingguoyouhuadetupianbunengchuandaowangshang。xiangliangtutongchangdanganbijiaoxiao，buguobufenjiaojiudeliulanqikenengbuzhiyuanxiangliangtu。ruguotupianyouhenduoquxian，danganyoukenenghuidianzhentuhaida，suoyiyaomingzhiqushe。
