為了desktop和mobile單獨使用像素設計的方法也成為了過(guò)去，因為越來(lái)越多的設備都可以打開(kāi)網(wǎng)站。因此，我們需要弄清楚響應式網(wǎng)頁(yè)設計 的一些基本原則，接受流體網(wǎng)頁(yè)，而不是與之相抗。為了讓它保持簡(jiǎn)單，我們將著(zhù)眼于布局（是的，響應式比它更復雜，如果你想了解更多，這是一個(gè)很好的開(kāi)端。）

響應式 vs 自適應網(wǎng)頁(yè)設計

它們看起來(lái)似乎是相同的，但事實(shí)并非如此。這兩種方法相輔相成，并沒(méi)有說(shuō)哪個(gè)是正確的那個(gè)是錯誤的，內容決定一切。

內容流動(dòng)

隨著(zhù)屏幕尺寸變小，內容將會(huì )占據更多的垂直空間，而下方的內容就會(huì )被接著(zhù)往下推，這就是所謂的流動(dòng)。如果你是使用像素和磅來(lái)進(jìn)行設計的，這可能會(huì )有點(diǎn)棘手，但是當你習慣了之后，就會(huì )變得很有意義了。

相對單位

畫(huà)布大小可以是desktop、mobile或是它們之間的任何尺寸。像素密度也可以有所不同，所以我們需要靈活的、在各種屏幕上都可以使用的單位。這就是相對單位（如百分比）派上用場(chǎng)的時(shí)候了。所以設置50%的寬度也就意味著(zhù)它會(huì )占據屏幕（或視圖，即打開(kāi)的瀏覽器窗口的尺寸）的一半。

斷點(diǎn)

斷點(diǎn)允許布局在預定義的點(diǎn)改變。例如：desktop屏幕上有3列，但是在mobile上只有一列。大多數CSS屬性可以根據斷點(diǎn)改變。通常你會(huì )根據具體的內容來(lái)設置斷點(diǎn)。如果一個(gè)句子超過(guò)了屏幕長(cháng)度，你可能就需要為其添加一個(gè)斷點(diǎn)。但是使用斷點(diǎn)是需要謹慎——當它很難理解什么內容會(huì )影響什么內容的時(shí)候，它可能會(huì )迅速地導致混亂。

最大值和最小值

有時(shí)候，如果內容占據了屏幕的整個(gè)寬度是很好的，比如在移動(dòng)設備上。但是如果是在電視屏幕上，相同的內容，占據了你的屏幕整個(gè)的寬度，通常就意義不大了。這就是Min/Max值發(fā)揮作用的時(shí)候了。比如說(shuō)，設置width為100%，然后max-width是1000px，那么內容會(huì )填滿(mǎn)屏幕，但是不會(huì )超過(guò)1000px。

嵌套對象

還記得相對位置嗎？讓很多元素的位置依賴(lài)于其它元素來(lái)定位是很難控制好的，因此使用容器來(lái)包裹元素可以讓它更易理解，也更整潔。這就是靜態(tài)單位（比如像素）發(fā)揮作用的時(shí)候了。對于你不想要模塊化的內容（比如logo或按鈕），它們是有用的。

Mobile優(yōu)先 還是Desktop優(yōu)先

從技術(shù)上講，如果一個(gè)項目是從一個(gè)較小的屏幕開(kāi)始，變成較大的屏幕（mobile優(yōu)先），還是反過(guò)來(lái)（desktop優(yōu)先），并沒(méi)有太大的差別。然 而它還是增加了額外的限制，可以幫助你決定是否從mobile優(yōu)先開(kāi)始。通常大家在一開(kāi)始的時(shí)候都會(huì )兩端一起寫(xiě)，所以，還是看看哪個(gè)運行起來(lái)更好。

網(wǎng)頁(yè)字體 vs 系統字體

希望你的網(wǎng)站上有很酷的Futura或Didot字體嗎？可以使用網(wǎng)頁(yè)字體！雖然它們看起來(lái)非常棒，但是記住字體放得越多，你加載頁(yè)面的時(shí)間也會(huì )越長(cháng)。在另一方面，加載系統字體確是快如閃電，但當用戶(hù)本地沒(méi)有這套字體時(shí)，它就會(huì )返回默認的字體。

位圖 vs 矢量圖

你是否想過(guò)在圖標上添加很多的細節和花哨的效果？如果想過(guò)的話(huà)，使用位圖比較合適。如果沒(méi)有，可以考慮使用矢量圖。對于位圖，使用的是jpg、png或gif格 式的圖像，而對于矢量圖，較好的選擇是SVG或圖標字體。每個(gè)都有對應的優(yōu)勢和缺點(diǎn)。但是圖片的大小也需要重視——網(wǎng)頁(yè)上的圖片需要經(jīng)過(guò)優(yōu)化。另一個(gè)方 面，矢量圖通常比較小，但是一些舊版的瀏覽器不支持。此外，如果它有很多曲線(xiàn)的話(huà)，它也可能會(huì )比位圖要重。所以，慎重選擇。

http://ezekroy.com/wangzhansheji/3190.html 響應式網(wǎng)頁(yè)設計的9條基本原則