年度最愛的8個CSS框架

于UI / UX設計人員而言，要制作一個在每個瀏覽器上都看起來不錯的漂亮網站不是一件容易的事。恐懼始終存在于內部，如果設計在某個愚蠢的瀏覽器上某個地方可怕地崩潰，該怎么辦！多虧了 CSS框架讓開發人員的生活變得輕松無極限。哪個框架最適合你？取決于你的特定需求。本文將討論一些適用于大多數行業開發人員的流行CSS框架。

1. Bootstrap

Bootstrap 是最流行的 HTML、CSS 和 JS 框架，GitHub 上近 14 萬的 Star 數就足以說明問題，用于在 Web 上開發響應式、移動優先項目。優點有很多，比如響應式設計，海量資源且簡單易學。不過也有人吐槽它稍顯臃腫，而且在使用人數太多且不定制化的情況下，容易導致很多網站外觀千篇一律。 Bootstrap 5 中也做了一些重大更改，比如隨意使用 jQuery 并添加了 RTL 支持，再加上現成的組件和工具類，它是Web開發人員的最佳選擇之一。

2.Tailwind CSS

Tailwind無疑是最有潛力的框架，提供了一種基于實用工具的現代方法來構建響應站點。相比其他CSS 框架，Tailwind在可定制這一點上幾乎是完勝，適合喜歡自己動手的小伙伴。它有大量的實用工具類，不用編寫 CSS 就可以構建現代網站。就是需要通過開發設置來縮小最終 CSS 的大小，因為使用默認值會得到一個很大的 CSS 文件。它還可以快速將樣式添加到 HTML 元素中，而且提供了大量的開箱即用的設計樣式。

3.Animate.css

它提供了極其豐富的動畫效果，可以讓你的網站活力四射！

4.Bulma

相比Bootstrap，Bulma 絕對算是后起之秀了，而且其上升勢頭相當迅猛，這是一個基于 Flexbox 布局模型的純粹的 CSS 開源框架，Bulma的主要特征有100%響應式設計、模塊化、現代化，對其他老牌框架審美疲勞的小伙伴可以試試。

5.Foundation

它是由產品設計公司 ZURB 制作的自適應前端框架，相比其他前端框架，除了擁有豐富的 web 應用框架之外，還有專業的電子郵件框架，而且具備超強的可讀性、靈活性和可定制化的特點，使得它成為惠普、亞馬遜等諸多大企業的選擇，是最先進的響應式前端框架，不過學習難度略高。

6. UIkit

這是一個輕量級且功能豐富的模塊化前端框架，響應式設計，統一的 UI 樣式和靈活的自定義選項可以幫你們快速搭建美觀、簡潔且模塊化的Web界面。提供了 HTML、CSS 和 JS 組件的全面集合，易于使用，定制和擴展。它還采用移動優先的方法，可擁有從手機、平板電腦到臺式機的一致體驗。

7.Materialize

它是構建響應式應用和網站的前端框架。它有個中文站，里面一個關于此框架學習的論壇，有興趣可以在那分享你的學習經驗，同時也可以獲得更多的技術幫助。

8.Paper Css

它是一個使用 LESS 構建的 CSS 框架，可以搭建出別具一格手寫風格的頁面。如果你喜歡這種風格可以試試。

有一個最佳的屏幕尺寸可以設計。網站應在不同的瀏覽器和平臺上以所有屏幕分辨率快速響應地進行轉換。無障礙。移動友好。首先為您的訪客設計。從360×640到1920×1080的設計。

適用于1024×768至1920×1080的臺式顯示器的設計
適用于360×640至414×896的移動顯示器的設計
適用于601×962至1280×800的平板顯示器的設計
檢查百度統計并針對目標受眾的最常見分辨率大小進行優化
不要設計一種顯示器尺寸或屏幕分辨率。屏幕大小和瀏覽器窗口狀態因訪問者而異。
設計應該響應迅速。使用可轉換為當前用戶窗口大小的自適應或響應式布局。
監控百度站長工具的移動設備友好性和可用性警告

它仍然應該看起來不錯，并且在所有尺寸下都可以正常工作，現在我們的建議是建設一個自適應/響應式網站。

針對特定屏幕尺寸優化頁面布局的三個主要標準是：

網頁的初始可見性：屏幕上方是否可見所有關鍵信息，以便用戶無需滾動即可查看？這是在顯示多少個項目與每個項目顯示多少細節之間的權衡。
網頁可讀性：給定頁面寬度，閱讀各列中的文本是否容易？
網頁美學：當元素的大小和屏幕大小合適時，頁面的外觀如何？是否所有元素都正確對齊？標題是否緊挨著圖片等？

可用性準則還建議您考慮所有大小的所有三個條件。檢查瀏覽器窗口的屏幕分辨率為360×640到1920×1080。

在整個分辨率范圍內，您的網頁在所有條件上的得分都應該很高。

您的頁面也應該以更大或更小的尺寸工作，盡管這種極端情況不那么重要。

盡管此類用戶當然應該能夠訪問您的網站，但為他們提供小于設計的外觀有時是可以接受的折衷方案。

十大最常見的屏幕分辨率

2020年的前6個月中，對451,027個訪客進行了訪客分析：

屏幕分辨率測試用戶數11920×108088,378（19.53％）21366×76867,912（15.01％）31440×90043,687（9.65％）41536×86432,872（7.26％）52560×144025,954（5.73％）61680×105020,068（4.43％）71280×72015,138（3.34％）81280×80014,007（3.09％）9360×64011,085（2.45％）101600×90010,193（2.25％）

響應式網站模板是一個很好的選擇

響應式Web設計：在相同的URL上提供相同的HTML代碼，而不管用戶的設備（例如，臺式機，平板電腦，移動設備，非可視瀏覽器）如何，但是可以根據屏幕大小來不同地呈現顯示。百度建議使用響應式Web設計，因為它是最容易實現和維護的設計模式。

在當今世界，許多人正在使用手持設備（平板電腦和智能手機）瀏覽網頁，而響應式網站設計（RWD）已經成為解決屏幕尺寸挑戰的極有可能的解決方案。

此方法不再使用固定寬度的網站，而是使用CSS樣式表中的“媒體查詢”來創建一個網站，該網站在大小上響應手持設備的不同視口以及人們使用的較小屏幕。

因此，無論人們使用什么設備來查看您的網站，您都可以為他們提供最完整的體驗。

百度首選適合移動設備的網站

如果您想為高競爭力的關鍵詞在百度獲得高排名，您就需要一個適合移動設備的網站。

網站對移動設備的友好程度如何影響各種設備對網站的排名效果。如果您為小型企業創建網站，您會知道他們想要一個在百度自然搜索中表現良好的網站。

目前從本質上講，這意味著網站設計具有響應性并且對移動設備友好，尤其是對于百度而言。

全球桌面屏幕分辨率統計，2019年5月– 2020年5月

作為參考，以下是最近（2020年）記錄的當前全球頂級屏幕分辨率的列表：

1366×768 – 23.49％
1920×1080 – 19.91％
1536×864 – 8.65％
1440×900 – 7.38％
1280×720 – 4.89％
1600×900 – 4.01％
1280×800 – 3.33％

全球移動屏幕分辨率統計，2019年5月– 2020年5月

360×640 – 17.91％
375×667 – 7.61％
414×896 – 6.52％
360×780 – 5.56％
360×760 – 5.06％
414×736 – 3.74％

全球平板電腦屏幕分辨率統計，2019年5月– 2020年5月

768×1024 – 51.98％
1280×800 – 7.11％
800×1280 – 5.34％
601×962 – 4.47％
600×1024 – 2.85％
1024×1366 – 1.96％

臺式機，手機與平板電腦的全球市場份額2019年5月– 2020年5月

手機– 50.48％
臺式機– 46.51％
平板電腦– 3.0％

如何設計在每個瀏覽器和分辨率下看起來都相同的網站？

你不能。不可能將網站設計成在每個瀏覽器，平臺和屏幕分辨率下看起來都一樣，所以請避免嘗試。

您可以選擇不帶表格的流暢布局來進行設計，其寬度百分比可以擴展和收縮以適合訪問者瀏覽器的設置，或者您可以考慮研究能夠實現相同效果的響應式設計解決方案。

搜索引擎偏愛響應式設計，這對于采用它的人來說是個好消息。移動技術正在興起-因此，如果要開發一個新網站-您必須從一開始就考慮您的網站對移動設備的友好程度。

在實際編寫代碼時，我們的目標是使事情簡單。從經驗中我們知道的是，對于您而言，確定您的受眾及其使用的設備，并從整體上構建適合該受眾的網站至關重要，受眾也包括搜索引擎。

您的移動網站是否重定向到您網站的另一個URL和版本？

好吧，那不是理想的。實際上，它從未如此。

追溯到今天-一些人使用網站的純文本版本為不支持其網站元素的用戶/瀏覽器生成內容-試圖（通常是徒勞的）使他們的內容更易于訪問。

W3C甚至曾經推薦它，我們認為如果其他所有方法都失敗了：

為訪問者目的而向訪問者傳遞一個URL始終是理想的選擇，并且如果您正在考慮創建網站的“移動”版本，則在傳遞移動或智能手機內容時沒有任何區別。

百度可能會在不久的將來對您的移動體驗做出主要評價-因此，我們所有人都確實需要意識到我們可能很快會在百度的SERP中看到巨大的變化。

當百度作為“訪問者”時，由于搜索引擎的典型URL挑戰，通常只提供一個URL甚至更為重要-在前一段時間實施規范鏈接元素之前就是這種情況。

因此，理想的情況是始終提供一個URL。

百度在這方面給出了建議：“如果您具有“智能手機”內容（我們將其視為普通的Web內容，因為它通常是普通的HTML頁面，只是在布局上進行了調整以顯示較小的內容），則可以使用rel=canonical指向您的桌面版本。這有助于我們專注于網絡搜索的桌面版本。當用戶使用智能手機訪問該桌面版本時，您可以將他們重定向到移動版本。無論URL結構如何，此方法均有效，因此您無需為智能手機移動網站使用子域/子目錄。然而，更好的方法是使用相同的URL并顯示內容的適當版本而無需重定向。”

百度還提供了以下提示，以檢查您的網站是否準備好使用移動優先索引，但是從本質上講，如果您正在為網站使用響應式網頁設計模板，則此更改的問題應該很小：

確保網站的移動版本還具有重要的高質量內容。這包括文本，圖像（帶有alt屬性）和視頻-采用通常的可檢索和可索引格式。
結構化數據對于用戶喜歡的索引和搜索功能很重要：它應該同時在網站的移動版和臺式機上。確保結構化數據中的URL已更新為移動頁面上的移動版本。
元數據應同時存在于網站的兩個版本中。它提供有關頁面內容的提示，以供索引和投放。例如，確保網站上所有頁面的兩個版本的標題和元描述都相同。
與單獨的移動網址（單點網站）相互鏈接無需更改。對于使用單獨移動URL的網站，請在這些版本之間保留現有的鏈接rel=canonical和鏈接rel=alternate元素。
檢查單獨的移動網址上的hreflang鏈接。當使用link rel=hreflang元素進行國際化時，移動URL和桌面URL之間分別進行鏈接。您的移動URL的hreflang應該指向其他移動URL上的其他語言/區域版本，并且類似地使用hreflang鏈接元素將桌面與其他桌面URL鏈接。
確保承載站點的服務器有足夠的容量來處理可能增加的爬網速度。這不會影響使用響應式網頁設計和動態服務的網站，只會影響移動版本位于單獨主機上的網站，例如m.example.com。

用戶期望向下滾動頁面

過去的網頁用戶通常不需要滾動，但多年來，這種情況已經改變。

因此，在設計時，應考慮如果用戶只滾動一個完整屏幕或兩個屏幕，可以看到多少內容。超過五個屏幕的長度可能表示您頁面上的內容過多。當然，用戶希望等待更短的時間來查看更全面的內容。

滾動和初始可見性顯然都取決于屏幕尺寸：較大的屏幕在屏幕上方會顯示更多內容，并且需要較少的滾動。

對響應式移動網站的更改會導百度帶來更多流量嗎？

不一定，但是有可能。

與百度優化有關的許多事情–建立一個適合移動設備的網站或多或少可以確保您保持已經獲得的訪問量，并不一定能為您提供來自百度的更多免費訪問量。

百度及其用戶再次提高了質量標準，如果您想在更具競爭力的SERP中競爭，這是小企業克服困難的又一個障礙。

從長遠來看，這種移動轉化僅對您的用戶來說是一件好事，但從短期來看，對小型企業的轉化率不會產生什么影響，因為通過移動設備獲得的轉化率通常低于桌面。

百度表示，這種適用于移動設備的算法對SERP的影響更大，隨著時間的流逝，我們將發現更多信息。

如何在您的網站上檢查重要的移動可用性問題

百度站長工具

您應該能夠在百度站長工具中跟蹤移動設備錯誤，并且如果您的網站配置正確，錯誤會隨著時間的流逝而消失。

m：

優先根據自身的字體大小，若沒有，向父級尋找字體大小，若父級沒有一直找到html聲明，若html沒有聲明，選擇默認瀏覽器的大小fontSize：16px；

.box{ font-size:30px; }
.box p{ font-size:1em; }
//p的大小也就是font-size=30px;,若無box字體大小設置，一直向上尋找，直到最后一層html，
//用戶可以更改html聲明中字體大小。

rem

相對跟元素html，設置字體大小來定義，ie8之前，不支持（不支持時，在html上聲明一個絕對單位，默認html=16px）

默認：1rem=16px
//用戶可以根據需要控制頁面字體大小

Vh&Vw

vh是height所用的單位，vw是width所用的單位；

vh是把視口水平等分成100份，height=20vh，就是占20份；

可適用于設置全屏的效果；

問：100vw和100%有什么區別？

答：100%是相對于上一層（父盒子）標簽，100vw是根據視口寬度計算的。

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商