20個增強網頁相容性設計的工具 + 生產力

來源:互聯網
上載者:User

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)

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。