20個增強網頁兼容性設計的實用工具

Cover Photo by： Wang Qi@DamnDigital

互聯網時代，人們利用各種設備上網：筆記本電腦、上網本、平板電腦、智能手機，甚至電視機。這些設備的屏幕和問題解決方案都各不相同，因而很難創建一個適用於所有這些設備的網站。

不過，還是有解決方法的。兼容性設計 就是為適應不同尺寸屏幕的整改設計。如果你想創建一個增強網頁兼容性的設計，你就需要應用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，（轉載請注明來自DamnDigital）