響應(yīng)式網(wǎng)頁設(shè)計(jì)是我們多屏幕問題的一個(gè)很好的解決方案，但是從打印的角度來看，它是困難的。沒有固定的頁面大小，毫米或毫米，沒有物理限制來對(duì)抗。隨著越來越多的小工具可以打開網(wǎng)站，Google桌面和手機(jī)的設(shè)計(jì)也是過去的。因此，讓我們澄清一下響應(yīng)式網(wǎng)頁設(shè)計(jì)的一些基本原則，以便擁抱流暢的網(wǎng)絡(luò)，而不是與之相沖突。為了保持簡(jiǎn)單，我們將專注于布局。
  響應(yīng)對(duì)比自適應(yīng)網(wǎng)頁設(shè)計(jì)
  它可能看起來一樣，但不是。這兩種方法相互補(bǔ)充，所以沒有對(duì)錯(cuò)的方法。讓內(nèi)容決定。
   流量
  隨著屏幕尺寸變小，內(nèi)容開始占據(jù)更多的垂直空間，下面的任何東西都會(huì)被推下來，這被稱為流程。如果您習(xí)慣于使用像素和點(diǎn)進(jìn)行設(shè)計(jì)，那么抓握可能會(huì)很棘手，但是當(dāng)您習(xí)慣使用它時(shí)，可能會(huì)很有意義。
   相對(duì)單位
  畫布可以是桌面，移動(dòng)屏幕或其間的任何東西。像素密度也可以有所不同，所以我們需要靈活的單位，無處不在。那就是百分比相對(duì)單位派上用場(chǎng)。所以做一些50％的寬度意味著它總是占用一半的屏幕（或視口，這是打開的瀏覽器窗口的大?。?。
   斷點(diǎn)
  斷點(diǎn)允許布局在預(yù)定義點(diǎn)更改，即在桌面上具有3列，但在移動(dòng)設(shè)備上只有1列。大多數(shù)CSS屬性可以從一個(gè)斷點(diǎn)更改為另一個(gè)斷點(diǎn)。通常你放在哪里取決于內(nèi)容。如果一個(gè)句子中斷，您可能需要添加一個(gè)斷點(diǎn)。但是請(qǐng)謹(jǐn)慎使用它們 - 當(dāng)很難理解什么是影響什么時(shí)，它可能會(huì)很快發(fā)生。
   最大值和最小值
  有時(shí)，內(nèi)容占用屏幕的整個(gè)寬度，如在移動(dòng)設(shè)備上，但是具有延伸到電視屏幕的整個(gè)寬度的相同內(nèi)容通常不那么有意義。這就是為什么Min / Max值有幫助。例如，寬度為100％，最大寬度為1000px將意味著內(nèi)容將填滿屏幕，但不要超過1000px。
   嵌套對(duì)象
  記得相對(duì)位置嗎？相互依賴的許多元素將難以控制，因此將容器中的元素包裹起來更容易理解，干凈整潔。這就是像像素這樣的靜態(tài)單位。它們對(duì)于您不想縮放的內(nèi)容（如徽標(biāo)和按鈕）很有用。
   移動(dòng)或桌面
  從技術(shù)上來說，如果一個(gè)項(xiàng)目從較小的屏幕開始到更大的（首先移動(dòng)的），反之亦然（桌面式），則沒有什么區(qū)別。然而，它增加了額外的限制，并幫助您做出決定，如果您首先從移動(dòng)開始。人們通常從兩端開始，所以真的，去看看什么對(duì)你更好。
   網(wǎng)頁字體與系統(tǒng)字體
  想要在您的網(wǎng)站上看到一個(gè)很酷的Futura或Didot？使用網(wǎng)頁字體雖然他們會(huì)看起來很驚艷，但請(qǐng)記住，每個(gè)都將被下載，您將擁有的越多，加載頁面所需的時(shí)間就越長(zhǎng)。另一方面，系統(tǒng)字體是閃電般快速的，除非用戶在本地沒有，否則會(huì)退回到默認(rèn)字體。
  位圖圖像與矢量圖
  你的圖標(biāo)有很多細(xì)節(jié)和一些花哨的效果嗎？如果是，請(qǐng)使用位圖。如果沒有，請(qǐng)考慮使用矢量圖像。對(duì)于位圖使用jpg，png或gif，對(duì)于矢量，最佳選擇將是SVG或圖標(biāo)字體。每個(gè)都有一些好處和一些缺點(diǎn)。但請(qǐng)記住大小 - 沒有圖片應(yīng)該在沒有優(yōu)化的情況下上網(wǎng)。另一方面，向量通常很小，但是一些較老的瀏覽器將不支持它。另外，如果它有很多曲線，它可能比位圖重，所以選擇明智。