互聯(lián)網(wǎng)的景觀幾年前大變了。之前，網(wǎng)頁設計師只需要擔心幾個不同的觀看平臺，主要是桌面視圖。隨著移動設備日益普及，以及各種尺寸的屏幕，隨著網(wǎng)絡設計師和開發(fā)人員的挑戰(zhàn)，這一切也在不斷變化。
響應網(wǎng)頁設計背后的想法是，網(wǎng)站應適應任何用于顯示的設備。不僅移動設備，而且在臺式電腦和平板電腦上。
根據(jù)反應靈敏的Web設計背后的主角，Ethan Marcotte，這種方法有三個部分：靈活的網(wǎng)格，靈活的圖像和媒體查詢。
網(wǎng)格系統(tǒng)，如在雜志布局中使用的那樣，對于響應網(wǎng)頁設計至關重要。為了使布局靈活，測量值必須是百分比，而不是像素。這意味著，寬度為50％的網(wǎng)站將始終占據(jù)網(wǎng)站瀏覽的一半屏幕，無論其大小如何。這是靈活和響應性網(wǎng)頁設計開始的地方。
當決定要響應的網(wǎng)站的背景時，最好的選擇是使用簡單的背景或簡單的紋理，可以無縫地平鋪，是垂直漸變，或者只是純粹的純色。靜態(tài)圖像，無縫拼接的背景和水平漸變不會優(yōu)于比您設計的屏幕更小或更大的屏幕尺寸。
設計響應式站點時，需要縮小每個方面。固定寬度的方法，如960.gs或Blueprint CSS框架，不是設計網(wǎng)站的最佳方式。
您必須以這樣的方式設計各種元素，即如果瀏覽器寬度更改，該網(wǎng)站仍將顯示您網(wǎng)站上的所有重要信息。
這可以通過將元素大小設置為百分比而不是像素來實現(xiàn)。
以百分比表示的工作與像素相同，沒有什么區(qū)別，您不需要學習其他屬性或CSS選擇器。以百分比表示的工作也比較簡單，因為很清楚什么width: 100%意思。
不管屏幕的尺寸如何，所提到的div總是在最大寬度。如果要使用100像素而不是100％，那么無論觀看屏幕多大，相應的div將始終為100像素寬。
在1600×900分辨率的桌面上，這不算太多，但是在空間上太多了。看到不同？以百分比而不是像素工作更合乎邏輯。