網際網路時代，人們利用各種裝置上網：膝上型電腦、上網本、平板電腦、智慧手機，甚至電視機。這些裝置的螢幕和問題解決方案都各不相同，因而很難建立一個適用於所有這些裝置的網站。
不過，還是有解決方法的。相容性設計 就是為適應不同尺寸螢幕的整改設計。如果你想建立一個增強網頁相容性的設計，你就需要應用fluid grids，影像以及queries。繼之前釋出的18個較強的相容性網頁設計案例後，這次與讀者們分享的是20個增強網頁相容性設計的實用工具。
Golden Grid System
Golden grid system 是為增強網頁相容性設計的摺合式grid。他有四個特徵：列，跨頁，底線，script。
Lettering.JS
這是jQuery針對基本網頁文書處理技巧的一個外掛。Lettering.js，擁有如下功能：字距調整型字型、編輯創意設計、可管理程式碼，使用者完全可以簡單操控。
FitText
FitText可隨意調整字型大小。這款外掛可以使相容性網頁頁面佈局突出大標題，主次分清。
Fluid 960 Grid System
Fluid 960 Grid System 的模版是根據Nathan Smith之前的作品而建立的。即960 Grid System：傳承了MooTools和jQuery JavaScript libraries的效果。
Gridless
Gridless可使使用者輕鬆應對相容性網站。它是以HTML5和CSS3程式碼為首選的優先相容手機的外掛，且支援文書處理佳的跨瀏覽器網頁。
Skeleton
Skeleton 是一個小的CSS & JS檔案集，可以讓使用者迅速設計好網頁：無論什麼尺寸的螢幕，看起來都很不錯，比如17寸的膝上型電腦螢幕或者iPhone。
Responsive Design Testing
只要輸入這個網頁地址，就可以測試任何尺寸的瀏覽器。
PX to EM
這是一個為使用者設定EM字型量身定製的計算工具。使用者只要選中相應的PX字型，就可以即時轉化為相應的EM大小的字型。
BluCSS
BluCSS是一個使用簡便且易記的CSS framework。當使用者進行下一個專案設計時，不必擔心之前必要設計元素的遺漏。
Seamless Responsive Photo Grid
假設使用者想在網頁上同時展示很多圖片，而且要求圖片間無縫連線。 Seamless就可以做到。詳情請進本站。
SimpleGrid
SimpleGrid 針對的是4個尺寸的螢幕：720畫素，大於720畫素，大於985畫素，大於1235畫素。這就是說當使用者訪問網頁時，頁面大小會自動切換到其各自瀏覽器視窗的大小。SimpleGrid帶你告別橫向滾動條。
Adapt.js
Adapt.js是一個縮小為826位元組的JavaScript檔案，用於選定瀏覽器執行頁面前要載入的CSS檔案。如果要使瀏覽器tilt或者重新調製大小，Adapt.js 會在必要時僅僅檢查螢幕寬度，提供必要的CSS。
Fluid Images
在這裡，你會找到很多與fluid images有關的實用資訊和模範程式碼。
Convert a Menu to a Dropdown for Small Screens
當瀏覽器視窗很窄時，右上方的選單欄會從常規的連線行轉變為下拉式選單。具體方法，詳見本站。
resizeMyBrowser
resizeMyBrowser是一款測試相容性網頁設計的完美工具，讓使用者輕鬆重置瀏覽器大小，一站式體驗時下最流行的尺寸或者個性化定製。
Responsive Table
所謂相容性設計就是為適應不同尺寸螢幕而進行的整改設計。同時資料表足夠寬，使用者絕對可以找到理想的問題解決方案。
Columnal
Columnal CSS grid system 混合了標準程式碼和個性化程式碼。這款grid system部分程式碼借鑑於cssgrid.net，還有些程式碼靈感則來自於960.gs 。Columnal使相容性網頁設計更加簡便。雖然它的螢幕寬度是1140畫素，但是因為採取了fluid設計，所以Columnal可以相容大部分瀏覽 器的寬度。
1140 CSS Grid
1140尺寸的 grid與1280尺寸的顯示器完美匹配。如果顯示器再小點，就會呈現fluid grid且會自動調節為瀏覽器的寬度。另外1140 grid應用了media queries以支援移動瀏覽器，這樣可以將所有資訊列同時置頂，保證了資訊的可讀性。
Mobilize.js
HTML5 和Javascript framework可使網頁實現移動化。網頁開發者通過Mobilize.js可將現有網頁建立為移動式網頁，且自動檢測移動瀏覽器，同時還支援 iPhone, Android, Blackberry, Opera Mini等很多其他瀏覽器及裝置。
Adaptive Images
Adaptive Images可將小影像傳輸到小型移動裝置上。它的嵌入式解決方案會自動建立、捕捉、傳輸裝置偏好版圖片，而不需要額外改動影像。
來源：DesignWoop
編譯：Antonia Huang@DamnDigital