響應式 Web 設計旨在為各種設備(從臺式機顯示器到手機)提供最佳的瀏覽體驗。本文匯總了一些優秀的響應式 Web 設計 HTML 和 CSS 框架。這些框架都是開源的并免費的。
對響應式 Web 框架進行比較并不那么容易。有的框架適合設計更快、更精簡網站的某些功能,而有些可能提供了大量功能、插件和附加組件,但是可能體積會比較龐大并且上手較難。
1.
是最流行的 HTML、CSS 和 JS 框架,用于在 Web 上開發響應式、移動優先項目。 使前端開發更快、更輕松。他們提供了大量的文檔、示例和演示,可以幫你快速進行響應式 Web 開發。在 5 中做了一些重大更改,例如隨意使用 并添加了 RTL 支持,再加上現成的組件和工具類,使 成為 Web 開發人員的最佳選擇之一。
你還可以找到許多免費的高級 模板 和 UI 工具包,這使你的開發過程更加輕松。
官網:/
2. CSS
提供了一種基于實用工具的現代方法來構建響應站點。它有大量的實用工具類,無需編寫 CSS 即可構建現代網站。它與其它框架的不同之處在于需要通過開發設置來縮小最終 CSS 的大小,因為如果使用默認值,最終將會得到一個很大的 CSS 文件。 能夠快速將樣式添加到 HTML 元素中,并提供了大量的開箱即用的設計樣式。這里有大量的 CSS 資源: 。
官網:/
3.
也是一個基于實用工具的 CSS 庫,它提供了許多即裝即用的復雜功能,無需自己編寫大量 CSS。這樣做的好處是 的開箱即用樣式很輕巧,不需要其他設置。如果需要的話,仍然可以通過一些方法來減小尺寸。如果你需要易用的實用工具庫,那么這應該是一個不錯的選擇。
官網:.io/
4.
是由產品設計公司 ZURB 制作的自適應前端框架。這個框架是他們自 1998 年來構建 Web 產品和服務的結果。 是最先進的響應式前端框架,并且提供了許多自定義功能。
官網:/
5. for (MDB)
MDB 建立在 之上,并提供了開箱即用的材料設計外觀。它具有出色的 CSS 庫,并且與大多數流行的 框架(如 、、React 和。Vue.js)兼容。其核心庫是完全免費使用的。
官網:/
6. UIkit
UIkit 是一個輕量級的模塊化前端框架,用于開發快速且強大的 Web 界面。 UIkit 提供了 HTML、CSS 和 JS 組件的全面集合,這些組件易于使用,易于定制和擴展。 UIkit 采用移動優先的方法css響應式布局媒體查詢,可提供從手機、平板電腦到臺式機的一致體驗。
官網:/
7. Pure CSS
Pure.css 是一組小型的響應式 CSS 模塊,可以用在任何一個 Web 項目中。Pure 的體積小的簡直過分。比如完整的時鐘模塊最小化壓縮版本僅為 4.0 KB。 Pure 基于 .css 構建,并提供原聲 HTML 元素以及最常見的 UI 組件的布局和樣式。 Pure 具有開箱即用的響應能力,所以元素在所有屏幕尺寸上都看起來不錯。
官網:.io/
8. Lite (MDL)
的 Lite 框架是最流行的 CSS 框架之一,可為你的網站添加 外觀。它不依賴任何 框架,可以跨設備使用,并且可以針對較舊的瀏覽器進行降級。它的構建充分考慮了可訪問性,并提供了豐富的文檔和入門模板。
官網:.io/
9.
是基于 的現代響應式前端框架。 的材料設計是一種流行的設計趨勢,涉及卡片、陰影和動畫。
官網:/
10.
如果你要開發較小的項目,或者只是覺得自己不需要大型框架的所有實用工具,則可以試試 。 僅設置了少量標準 HTML 元素的樣式,并包含一個網格。
中的網格是一個 12 列的流體網格,最大寬度為 960px,隨著瀏覽器或設備的縮小而縮小。可以用一行 CSS 更改最大寬度,并且所有列的大小都會相應進行調整。其語法很簡單,使響應式編碼更加容易。
官網:/
11. Bulma
Bulma 是基于 的現代 CSS 框架。它提供了響應式設計和移動設備優先的 UI 組件,并具有模塊化結構,可讓你只導入要包含在 Web 設計中的內容。Bulma 還提供了一個基于 的現代網格系統。
官網:bulma.io/
12. UI
UI 是一個高級 CSS 框架,提供了 50 多個 UI 元素,300 多個 CSS 變量用于自定義,并通過 EM 值構建以用于響應式設計。它也已準備好 。
是可用于生產環境的 CSS 框架,并能與 React、、 和 Ember 等框架整合,你可以通過與這些框架中進行集成將 UI 層與應用邏輯組織在一起。
官網:/
13.
是一個極簡的 CSS 框架,不依賴 。它通過最少的樣式設置用來快速、干凈的創建響應式網站。它還提供了一個基于 的網格系統。
官網:..io/
14. .css
.css 是一個輕量級的庫,它提供了開箱即用的css響應式布局媒體查詢,基于 的響應式和移動友好型布局。以在它的基礎上根據自己的需要添加樣式和響應實用工具。
官網:
15. Base CSS
Base 也是一個輕量級 CSS 框架,可用于構建響應式網站。它為網站項目提供了免費的基礎入門軟件以及許多付費的現成模板。
官網:/
如果對這些框架進行比較,你會發現 、 和 的流行度遠遠領先于其他框架。
設計機構通常選擇 ,因為它提供了開箱即用的組件,并且易于定制。這就是 主題和庫數量眾多的原因。
原文鏈接:資源:15 個優秀的響應式 CSS 框架