響應(yīng)式網(wǎng)頁設(shè)計是針對多屏幕問題的一個很好的解決方案想许，但從印刷的視角來看有點困難河泳。沒有固定的頁面尺寸，沒有毫米或英寸年栓，沒有任何的物理限制拆挥，無 從下手。為了desktop和mobile單獨使用像素設(shè)計的方法也成為了過去某抓，因為越來越多的設(shè)備都可以打開網(wǎng)站纸兔。因此，我們需要弄清楚響應(yīng)式網(wǎng)頁設(shè)計 的一些基本原則否副，接受流體網(wǎng)頁汉矿，而不是與之相抗。為了讓它保持簡單备禀，我們將著眼于布局（是的洲拇，響應(yīng)式比它更復(fù)雜，如果你想了解更多曲尸，這是一個很好的開端赋续。）
響應(yīng)式 vs 自適應(yīng)網(wǎng)頁設(shè)計
它們看起來似乎是相同的，但事實并非如此另患。這兩種方法相輔相成纽乱，并沒有說哪個是正確的那個是錯誤的，內(nèi)容決定一切昆箕。
內(nèi)容流動
隨著屏幕尺寸變小鸦列，內(nèi)容將會占據(jù)更多的垂直空間租冠，而下方的內(nèi)容就會被接著往下推，這就是所謂的流動薯嗤。如果你是使用像素和磅來進(jìn)行設(shè)計的顽爹，這可能會有點棘手，但是當(dāng)你習(xí)慣了之后应民，就會變得很有意義了话原。
相對單位
畫布大小可以是desktop、mobile或是它們之間的任何尺寸诲锹。像素密度也可以有所不同繁仁，所以我們需要靈活的、在各種屏幕上都可以使用的單位归园。這就是相對單位（如百分比）派上用場的時候了黄虱。所以設(shè)置50%的寬度也就意味著它會占據(jù)屏幕（或視圖，即打開的瀏覽器窗口的尺寸）的一半庸诱。
斷點
斷點允許布局在預(yù)定義的點改變捻浦。例如：desktop屏幕上有3列，但是在mobile上只有一列桥爽。大多數(shù)CSS屬性可以根據(jù)斷點改變朱灿。通常你會根據(jù)具體的內(nèi)容來設(shè)置斷點。如果一個句子超過了屏幕長度钠四，你可能就需要為其添加一個斷點盗扒。但是使用斷點是需要謹(jǐn)慎——當(dāng)它很難理解什么內(nèi)容會影響什么內(nèi)容的時候，它可能會迅速地導(dǎo)致混亂缀去。
最大值和最小值
有時候侣灶，如果內(nèi)容占據(jù)了屏幕的整個寬度是很好的，比如在移動設(shè)備上缕碎。但是如果是在電視屏幕上褥影，相同的內(nèi)容，占據(jù)了你的屏幕整個的寬度咏雌，通常就意義不大了凡怎。這就是Min/Max值發(fā)揮作用的時候了。比如說处嫌，設(shè)置width為100%栅贴，然后max-width是1000px，那么內(nèi)容會填滿屏幕熏迹，但是不會超過1000px檐薯。
嵌套對象
還記得相對位置嗎？讓很多元素的位置依賴于其它元素來定位是很難控制好的，因此使用容器來包裹元素可以讓它更易理解坛缕，也更整潔墓猎。這就是靜態(tài)單位（比如像素）發(fā)揮作用的時候了。對于你不想要模塊化的內(nèi)容（比如logo或按鈕）赚楚，它們是有用的毙沾。
Mobile優(yōu)先 還是Desktop優(yōu)先
從技術(shù)上講，如果一個項目是從一個較小的屏幕開始宠页，變成較大的屏幕（mobile優(yōu)先）左胞，還是反過來（desktop優(yōu)先），并沒有太大的差別举户。然 而它還是增加了額外的限制烤宙，可以幫助你決定是否從mobile優(yōu)先開始。通常大家在一開始的時候都會兩端一起寫俭嘁，所以躺枕，還是看看哪個運行起來更好。
網(wǎng)頁字體 vs 系統(tǒng)字體
希望你的網(wǎng)站上有很酷的Futura或Didot字體嗎供填？可以使用網(wǎng)頁字體拐云！雖然它們看起來非常棒，但是記住字體放得越多近她，你加載頁面的時間也會越長叉瘩。在另一方面，加載系統(tǒng)字體確是快如閃電粘捎，但當(dāng)用戶本地沒有這套字體時房揭，它就會返回默認(rèn)的字體。
位圖 vs 矢量圖
你是否想過在圖標(biāo)上添加很多的細(xì)節(jié)和花哨的效果晌端？如果想過的話，使用位圖比較合適恬砂。如果沒有咧纠，可以考慮使用矢量圖。對于位圖泻骤，使用的是jpg漆羔、png或gif格 式的圖像，而對于矢量圖狱掂，最好的選擇是SVG或圖標(biāo)字體演痒。每個都有對應(yīng)的優(yōu)勢和缺點。但是圖片的大小也需要重視——網(wǎng)頁上的圖片必須經(jīng)過優(yōu)化趋惨。另一個方 面鸟顺，矢量圖通常比較小，但是一些舊版的瀏覽器不支持。此外讯嫂，如果它有很多曲線的話蹦锋，它也可能會比位圖要重。所以欧芽，慎重選擇莉掂。
覺得我們遺漏了什么重要的內(nèi)容？在評論里給我們留言吧千扔！
本文根據(jù)@Sandijs Ruluks的《9 basic principles of responsive web design》所譯憎妙，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點曲楚。如需轉(zhuǎn)載此譯文厘唾，需注明英文出處：http://blog.froont.com/9-basic-principles-of-responsive-web-design/。
