響應式網頁設計是針對多螢幕問題的一個很好的解決方案，但從印刷的視角來看有點困難。沒有固定的頁面尺寸，沒有毫米或英寸，沒有任何的物理限制，無從下手。為了 desktop 和 mobile 單獨使用畫素設計的方法也成為了過去，因為越來越多的裝置都可以開啟網站。因此，WordPress 網站建設覺得需要我們需要弄清楚響應式網頁設計的一些基本原則，接受流體網頁，而不是與之相抗。

1. 響應式 vs 自適應網頁設計

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

2. 內容流動

隨著螢幕尺寸變小，內容將會佔據更多的垂直空間，而下方的內容就會被接著往下推，這就是所謂的流動。如果您是使用畫素和磅來進行設計的，這可能會有點棘手，但是當您習慣了之後，就會變得很有意義了-WordPress 網站設計認為！

3. 相對單位

 畫布大小可以是 desktop 、 mobile 或是它們之間的任何尺寸。畫素密度也可以有所不同，所以我們需要靈活的、在各種螢幕上都可以使用的單位。這就是相對單位（如百分比）派上用場的時候了。所以設定 50% 的寬度也就意味著它會佔據螢幕（或檢視，即開啟的瀏覽器視窗的尺寸）的一半。

4. 斷點

斷點允許佈局在預定義的點改變。例如：desktop 螢幕上有 3 列，但是在 mobile 上只有一列。大多數 CSS 屬性可以根據斷點改變。通常您會根據具體的內容來設定斷點。如果一個句子超過了螢幕長度，您可能就需要為其新增一個斷點。但是使用斷點是需要謹慎——當它很難理解什麼內容會影響什麼內容的時候，它可能會迅速地導致混亂。

5. 大值和小值

有時候，如果內容佔據了螢幕的整個寬度是很好的，比如在移動裝置上。但是如果是在電視螢幕上，相同的內容，佔據了您的螢幕整個的寬度，通常就意義不大了。這就是 Min/Max 值發揮作用的時候了。比如說，設定 width 為 100%，然後 max-width 是 1000px，那麼內容會填滿螢幕，但是不會超過 1000px 。

6. 巢狀物件

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

7.Mobile 優先 還是 Desktop 優先

從技術上講，如果一個專案是從一個較小的螢幕開始，變成較大的螢幕（mobile 優先），還是反過來（desktop 優先），並沒有太大的差別。然 而它還是增加了額外的限制，可以幫助您決定是否從 mobile 優先開始。通常大家在一開始的時候都會兩端一起寫，所以，還是看看哪個執行起來更好。

8. 網頁字型 vs 系統字型

希望您的網站上有很酷的 Futura 或 Didot 字型嗎？可以使用網頁字型！雖然它們看起來非常棒，但是記住字型放得越多，您載入頁面的時間也會越長。在另一方面，載入系統字型確是快如閃電，但當多使用者本地沒有這套字型時，它就會返回預設的字型。

9. 點陣圖 vs 向量圖

    您是否想過在圖示上新增很多的細節和花哨的效果？如果想過的話，使用點陣圖比較合適。如果沒有，可以考慮使用向量圖。對於點陣圖，使用的是 jpg 、 png 或 gif 格 式的影象，而對於向量圖，知名的選擇是 SVG 或圖示字型。每個都有對應的優勢和缺點。但是圖片的大小也需要重視——網頁上的圖片必須經過最佳化。另一個方 面，向量圖通常比較小，但是一些舊版的瀏覽器不支援。此外，如果它有很多曲線的話，它也可能會比點陣圖要重。所以，慎重選擇。