它們看起來似乎是相同的，但事實並非如此。這兩種方法相輔相成，並沒有說哪個是正確的那個是錯誤的，內容決定一切。
隨著螢幕尺寸變小，內容將會佔據更多的垂直空間，而下方的內容就會被接著往下推，這就是所謂的流動。如果你是使用畫素和磅來進行設計的，這可能會有點棘手，但是當你習慣了之後，就會變得很有意義了。
畫布大小可以是desktop、mobile或是它們之間的任何尺寸。畫素密度也可以有所不同，所以我們需要靈活的、在各種螢幕上都可以使用的單位。這就是相對單位（如百分比）派上用場的時候了。所以設定50%的寬度也就意味著它會佔據螢幕（或檢視，即開啟的瀏覽器視窗的尺寸）的一半。
斷點允許布局在預定義的點改變。例如：desktop螢幕上有3列，但是在mobile上只有一列。大多數css屬性可以根據斷點改變。通常你會根據具體的內容來設定斷點。如果乙個句子超過了螢幕長度，你可能就需要為其新增乙個斷點。但是使用斷點是需要謹慎——當它很難理解什麼內容會影響什麼內容的時候，它可能會迅速地導致混亂。
有時候，如果內容佔據了螢幕的整個寬度是很好的，比如在移動裝置上。但是如果是在電視螢幕上，相同的內容，佔據了你的螢幕整個的寬度，通常就意義不大了。這就是min/max值發揮作用的時候了。比如說，設定width為100%，然後max-width是1000px，那麼內容會填滿螢幕，但是不會超過1000px。
還記得相對位置嗎？讓很多元素的位置依賴於其它元素來定位是很難控制好的，因此使用容器來包裹元素可以讓它更易理解，也更整潔。這就是靜態單位（比如畫素）發揮作用的時候了。對於你不想要模組化的內容（比如logo或按鈕），它們是有用的。
從技術上講，如果乙個專案是從乙個較小的螢幕開始，變成較大的螢幕（mobile優先），還是反過來（desktop優先），並沒有太大的差別。然而它還是增加了額外的限制，可以幫助你決定是否從mobile優先開始。通常大家在一開始的時候都會兩端一起寫，所以，還是看看哪個執行起來更好。
希望你的**上有很酷的futura或didot字型嗎？可以使用網頁字型！雖然它們看起來非常棒，但是記住字型放得越多，你載入頁面的時間也會越長。在另一方面，載入系統字型確是快如閃電，但當使用者本地沒有這套字型時，它就會返回預設的字型。
你是否想過在圖示上新增很多的細節和花哨的效果？如果想過的話，使用位圖比較合適。如果沒有，可以考慮使用向量圖。對於位圖，使用的是jpg、png或gif格式的影象，而對於向量圖，最好的選擇是svg或圖示字型。每個都有對應的優勢和缺點。但是的大小也需要重視——網頁上的必須經過優化。另乙個方面，向量圖通常比較小，但是一些舊版的瀏覽器不支援。此外，如果它有很多曲線的話，它也可能會比位圖要重。所以，慎重選擇。
英文出處：
。
響應式網頁
1.將width改為max width，來適應螢幕的變動來改變自身寬度等。其他亦然。查詢，參考部分bootstarp框架 當頁面大於1200px時，大螢幕，主要顯示pc端 media min width 1200px 在992 和1199 畫素之間的螢幕裡，中等螢幕，解析度低的pc media mi...
響應式網頁
做響應式網頁需要注意 1.使用百分比來代替固定長度 2.當你需要在較大解析度下得到固定寬度時，使用max width而不是width，因為他可以適應較小的解析度 3.不要忘記給替換元素 eg.img,object,video,iframe 設定乙個max width，值為100 4.背景圖鋪滿整個容...
響應式網頁設計教程 展示響應式設計的基本原理
響應式網頁設計，毫無疑問地變得越來越重要了。如果你還沒聽說過響應式設計，可以先看看我之前發的文章響應式 對新手來說,響應式設計聽起來可能會有點複雜,但事實上，它比你想象的簡單得多。為了讓你能快速入門，我準備了乙個簡易的教程。通過這三個步驟，你一定可以了解響應式設計的基本原理和media query ...