資源：15 個優秀的響應式 CSS 框架

時間 2021-03-11

標籤 css 前端 git 程序員 github 面試 bootstrap segmentfault 瀏覽器前端框架欄目 CSS 简体版

原文原文鏈接

響應式 Web 設計旨在爲各類設備（從臺式機顯示器到手機）提供最佳的瀏覽體驗。本文彙總了一些優秀的響應式 Web 設計 HTML 和 CSS 框架。這些框架都是開源的並免費的。css

對響應式 Web 框架進行比較並不那麼容易。有的框架適合設計更快、更精簡網站的某些功能，而有些可能提供了大量功能、插件和附加組件，可是可能體積會比較龐大而且上手較難。前端

1. Bootstrap

Bootstrap 是最流行的 HTML、CSS 和 JS 框架，用於在 Web 上開發響應式、移動優先項目。 Bootstrap 使前端開發更快、更輕鬆。他們提供了大量的文檔、示例和演示，能夠幫你快速進行響應式 Web 開發。在 Bootstrap 5 中作了一些重大更改，例如隨意使用 jQuery 並添加了 RTL 支持，再加上現成的組件和工具類，使 Bootstrap 成爲 Web 開發人員的最佳選擇之一。git

你還能夠找到許多免費的高級 bootstrap 模板和 UI 工具包，這使你的開發過程更加輕鬆。程序員

官網：https://getbootstrap.com/github

2. Tailwind CSS

Tailwind 提供了一種基於實用工具的現代方法來構建響應站點。它有大量的實用工具類，無需編寫 CSS 便可構建現代網站。它與其它框架的不一樣之處在於須要經過開發設置來縮小最終 CSS 的大小，由於若是使用默認值，最終將會獲得一個很大的 CSS 文件。Tailwind 可以快速將樣式添加到 HTML 元素中，並提供了大量的開箱即用的設計樣式。這裏有大量的 Tailwind CSS 資源： https://superdevresources.com...。面試

官網：https://tailwindcss.com/bootstrap

3. Tachyons

Tachyons 也是一個基於實用工具的 CSS 庫，它提供了許多即裝即用的複雜功能，無需本身編寫大量 CSS。這樣作的好處是 Tachyons 的開箱即用樣式很輕巧，不須要其餘設置。若是須要的話，仍然能夠經過一些方法來減少尺寸。若是你須要易用的實用工具庫，那麼這應該是一個不錯的選擇。segmentfault

官網：https://tachyons.io/瀏覽器

4. Foundation

Foundation 是由產品設計公司 ZURB 製做的自適應前端框架。這個框架是他們自 1998 年來構建 Web 產品和服務的結果。Foundation 是最早進的響應式前端框架，而且提供了許多自定義功能。前端框架

官網：http://foundation.zurb.com/

5. Material Design for Bootstrap (MDB)

MDB 創建在 Bootstrap 之上，並提供了開箱即用的材料設計外觀。它具備出色的 CSS 庫，而且與大多數流行的 JavaScript 框架（如 jQuery、Angular、React 和。Vue.js）兼容。其核心庫是徹底無償使用的。

官網：https://mdbootstrap.com/

6. UIkit

UIkit 是一個輕量級的模塊化前端框架，用於開發快速且強大的 Web 界面。 UIkit 提供了 HTML、CSS 和 JS 組件的全面集合，這些組件易於使用，易於定製和擴展。 UIkit 採用移動優先的方法，可提供從手機、平板電腦到臺式機的一致體驗。

官網：http://getuikit.com/

7. Pure CSS

Pure.css 是一組小型的響應式 CSS 模塊，能夠用在任何一個 Web 項目中。Pure 的體積小的簡直過度。好比完整的時鐘模塊最小化壓縮版本僅爲 4.0 KB。 Pure 基於 Normalize.css 構建，並提供原聲 HTML 元素以及最多見的 UI 組件的佈局和樣式。 Pure 具備開箱即用的響應能力，因此元素在全部屏幕尺寸上都看起來不錯。

官網：http://purecss.io/

8. Material Design Lite Framework (MDL)

Google 的 Material Design Lite 框架是最流行的 CSS 框架之一，可爲你的網站添加 Material Design 外觀。它不依賴任何 JavaScript 框架，能夠跨設備使用，而且能夠針對較舊的瀏覽器進行降級。它的構建充分考慮了可訪問性，並提供了豐富的文檔和入門模板。

官網：https://getmdl.io/