【轉載】響應式網頁設計的9條基本原則

響應式網頁設計是針對多屏幕問題的一個很好的解決方案，但從印刷的視角來看有點困難。沒有固定的頁面尺寸，沒有毫米或英寸，沒有任何的物理限制，無 從下手。爲了desktop和mobile單獨使用像素設計的方法也成爲了過去，由於愈來愈多的設備均可以打開網站。所以，咱們須要弄清楚響應式網頁設計 的一些基本原則，接受流體網頁，而不是與之相抗。爲了讓它保持簡單，咱們將着眼於佈局（是的，響應式比它更復雜，若是你想了解更多，這是一個很好的開端。）

響應式 vs 自適應網頁設計

它們看起來彷佛是相同的，但事實並不是如此。這兩種方法相輔相成，並無說哪一個是正確的那個是錯誤的，內容決定一切。

內容流動

隨着屏幕尺寸變小，內容將會佔據更多的垂直空間，而下方的內容就會被接着往下推，這就是所謂的流動。若是你是使用像素和磅來進行設計的，這可能會有點棘手，可是當你習慣了以後，就會變得頗有意義了。

相對單位

畫 布大小能夠是desktop、mobile或是它們之間的任何尺寸。像素密度也能夠有所不一樣，因此咱們須要靈活的、在各類屏幕上均可以使用的單位。這就是 相對單位（如百分比）派上用場的時候了。因此設置50%的寬度也就意味着它會佔據屏幕（或視圖，即打開的瀏覽器窗口的尺寸）的一半。

斷點

斷 點容許佈局在預約義的點改變。例如：desktop屏幕上有3列，可是在mobile上只有一列。大多數CSS屬性能夠根據斷點改變。一般你會根據具體的 內容來設置斷點。若是一個句子超過了屏幕長度，你可能就須要爲其添加一個斷點。可是使用斷點是須要謹慎——當它很難理解什麼內容會影響什麼內容的時候，它 可能會迅速地致使混亂。

最大值和最小值

有 時候，若是內容佔據了屏幕的整個寬度是很好的，好比在移動設備上。可是若是是在電視屏幕上，相同的內容，佔據了你的屏幕整個的寬度，一般就意義不大了。這 就是Min/Max值發揮做用的時候了。好比說，設置width爲100%，而後max-width是1000px，那麼內容會填滿屏幕，可是不會超過 1000px。

嵌套對象

還記得相對位置嗎？讓不少元素的位置依賴於其它元素來定位是很難控制好的，所以使用容器來包裹元素可讓它更易理解，也更整潔。這就是靜態單位（好比像素）發揮做用的時候了。對於你不想要模塊化的內容（好比logo或按鈕），它們是有用的。

Mobile優先 仍是Desktop優先

從 技術上講，若是一個項目是從一個較小的屏幕開始，變成較大的屏幕（mobile優先），仍是反過來（desktop優先），並無太大的差異。然 而它仍是增長了額外的限制，能夠幫助你決定是否從mobile優先開始。一般你們在一開始的時候都會兩端一塊兒寫，因此，仍是看看哪一個運行起來更好。

網頁字體 vs 系統字體

但願你的網站上有很酷的Futura或Didot字體嗎？可使用網頁字體！雖然它們看起來很是棒，可是記住字體放得越多，你加載頁面的時間也會越長。在另外一方面，加載系統字體確是快如閃電，但當用戶本地沒有這套字體時，它就會返回默認的字體。

位圖 vs 矢量圖

你 是否想過在圖標上添加不少的細節和花哨的效果？若是想過的話，使用位圖比較合適。若是沒有，能夠考慮使用矢量圖。對於位圖，使用的是jpg、png或 gif格 式的圖像，而對於矢量圖，最好的選擇是SVG或圖標字體。每一個都有對應的優點和缺點。可是圖片的大小也須要重視——網頁上的圖片必須通過優化。另外一個方 面，矢量圖一般比較小，可是一些舊版的瀏覽器不支持。此外，若是它有不少曲線的話，它也可能會比位圖要重。因此，慎重選擇。

以爲咱們遺漏了什麼重要的內容？在評論裏給咱們留言吧！

本文根據@Sandijs Ruluks的《9 basic principles of responsive web design》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://blog.froont.com/9-basic-principles-of-responsive-web-design/。