廣州響應(yīng)式網(wǎng)頁設(shè)計很好的解決了多類型屏幕的問題，但是從打印的角度來看，它有很多困難。沒有固定的頁面大小，沒有毫米或英寸，沒有物理限制，讓人覺得無從下手。隨著越來越多的小工具可用于建設(shè)網(wǎng)站，像素設(shè)計僅限于桌面和移動已經(jīng)成為歷史。因此，讓我們來解釋一下如何使用響應(yīng)性網(wǎng)頁設(shè)計的基本原則，而不是抵制流暢的網(wǎng)頁體驗。為簡單起見，我們將重點(diǎn)介紹布局。

　　響應(yīng)性設(shè)計與適應(yīng)性網(wǎng)頁設(shè)計

　　看起來一樣，其實不是。這兩種設(shè)計方法相輔相成，沒有對錯之分。具體要看內(nèi)容。

　　內(nèi)容流

　　隨著屏幕尺寸越來越小，內(nèi)容占據(jù)的垂直空間越來越多，也就是說內(nèi)容會向下延伸，這就是所謂的內(nèi)容流。如果你習(xí)慣了用像素和點(diǎn)來設(shè)計，你可能會覺得這個有點(diǎn)難掌握。不過沒關(guān)系，習(xí)慣了就好理解了。

　　相對單位

　　您的設(shè)計對象可以是桌面、移動屏幕或介于兩者之間的任何屏幕類型。每英寸像素會互不相同，所以我們需要使用靈活、適應(yīng)性強(qiáng)的單元。在這種情況下，百分比等相對單位會派上用場。當(dāng)使用百分比時，我們說50%的寬度意味著寬度占屏幕大小(或視口，即打開的瀏覽器窗口的大小)的一半。

　　斷點(diǎn)

　　斷點(diǎn)可以在預(yù)設(shè)點(diǎn)使頁面布局變形，即在桌面上顯示3列，在移動設(shè)備上只顯示1列。大多數(shù)CSS屬性可以在斷點(diǎn)之間轉(zhuǎn)換。斷點(diǎn)的位置通常取決于內(nèi)容。例如，如果要換行，可能需要添加斷點(diǎn)。但是，應(yīng)該小心使用斷點(diǎn)。如果搞不清內(nèi)容之間的邏輯關(guān)系，很容易搞得亂七八糟。

　　最大值和最小值

　　有時候內(nèi)容占據(jù)整個屏幕寬度是好事(比如在移動設(shè)備上)，但是如果同樣的內(nèi)容在電視屏幕上也是滿的，那就顯得不合理了。所以才有最大/最小值。例如，如果寬度為100%，最大寬度為1000px，內(nèi)容將以不超過1000px的寬度填充屏幕。

　　嵌套對象

　　還記得相對位置嗎？如果大量的元素彼此緊密相關(guān)，就很難控制。因此，將功能放在容器中會使它們更容易理解和簡潔。這種情況下，需要像素等靜態(tài)單位。靜態(tài)單元對于不需要擴(kuò)展的東西非常有用，比如logo，按鈕。

　　移動優(yōu)先還是桌面優(yōu)先嚴(yán)格來說，從小屏幕過渡到大屏幕(移動優(yōu)先)或者從大屏幕過渡到小屏幕(桌面優(yōu)先)差別不大。但是，從移動端開始可以給你帶來一些額外的限制，幫助你做決定。通常人們會同時從兩個方面入手，所以你還是要看哪種方法最適合你。

　　網(wǎng)頁字體與系統(tǒng)字體

　　想讓你的網(wǎng)站有一個酷的未來或迪多特效應(yīng)？那就是用網(wǎng)頁字體。雖然web字體看起來很酷，但是你要記住這些字體是需要用戶下載的。單詞越多，用戶加載頁面的時間就越長。另一方面，系統(tǒng)字體加載速度要快得多(前提是用戶本地有)，但是太普通了。

　　位圖與矢量圖

　　你的圖標(biāo)有很多細(xì)節(jié)和很多華麗的效果嗎？如果是這樣，請使用位圖。如果沒有，考慮使用矢量圖。如果是位圖，使用jpg，png或gif。矢量圖最好用SVG或者圖標(biāo)字體。各有利弊。但是你要時刻記住，圖標(biāo)大小為——的圖片，不經(jīng)過優(yōu)化是無法上傳到網(wǎng)上的。另一方面，矢量圖形通常很小，但是一些舊的瀏覽器可能不支持矢量圖形。另外，如果圖標(biāo)有許多曲線，它可能比位圖大，所以明智地選擇。