自適應內容
為了解決這個問題，我們可以使用一項技巧使內容自適應特定範圍的解析度螢幕。幸運的是，我們可以利用上面的技術來保持我們的比例，然後增加該項技術以得到更好的可用性。
自適應內容流動布局
大多數流動布局在解析度為800×600的螢幕中看起來很大很寬－－高達1280px。但是，我們可以稍稍突破一下，針對 800px－1024px、1024px－1280px、1280px以上的螢幕定製略微不同的布局。同樣，也可為640px－800px、 320px－640px、240px－320px、240px以下的螢幕自定義調整。
乙個針對解析度超過800px的螢幕；乙個針對解析度小於800px的螢幕。 這種技巧用不同風格的布局取更好的適應不同解析度的螢幕
優點
設計者可以更精確的看到，在不同解析度螢幕下，其設計是什麼樣子；
無論是在什麼平台上檢視，其更好的遵守了間距和平衡的設計原則；
完美的處理了最小和最大解析度。
第一步是建立一系列可替代的布局檔案。例如，乙個稱之為narrow.css，其針對小解析度的螢幕。另乙個可稱之為normal.css，適應於傳統的解析度螢幕，第三可稱之為wide.css，將處理較大解析度的螢幕。
我們可以使用js根據預設的樣式表作簡單的改動，dynamic resolution dependent layouts
在演示頁中使用js解釋了如何使用它，於其它型別布局一樣，所有樣式和js檔案都放在頭部。
以下是**片段：
注意到所有三個鏈結樣式單的title屬性：「narrow」、「default」、「wide」，在js原始檔中檢視dynamiclayout() 函式。可以看到，我們會很容易的根據每個title屬性來呼叫相應的樣式，以及如何改變相應的寬度。
以下是**片段：
function dynamiclayout()
// normal (default) css rules
if ((browserwidth >= 640) && (browserwidth <= 960))
// wide css rules
if (browserwidth > 960)
}這種技術很容易實現，能夠與其它技術一起建立更多的可用性布局。仔細檢視js，可以看到更多細節。
詳細見：
自適應布局
請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...
使用負邊距建立自適應寬度的流體布局
合理使用負邊距技術，可以幫助我們建立很多有意思的布局，比如自適應瀏覽器寬度的流體布局。國外關於使用負邊距建立這類布局的技術文件，我看到的最早是04年 ryan brill 發表在 a list apart 上的 creating liquid layouts with negative margin...
使用負邊距建立自適應寬度的流體布局
隨著越來越大的瀏覽器的出現及普及，介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，採用目前的主流 960px左右的寬度。我認為，對於不太複雜的 採用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面 部落格頁面...