用 CSS 框架是當(dāng)前大部分前后端開(kāi)發(fā)人員都會(huì)選擇的，CSS框架的好處是幫開(kāi)發(fā)人員節(jié)省了開(kāi)發(fā)時(shí)間，提高了工作效率，改善用戶體驗(yàn)，并且能很好的解決各種瀏覽器之間的兼容性問(wèn)題。當(dāng)然也會(huì)存在代碼冗余，影響網(wǎng)站打開(kāi)速度，但是對(duì)于好處來(lái)說(shuō)這些問(wèn)題都不是問(wèn)題。

接下去我會(huì)分享我所知道的所有的CSS框架，盡量把網(wǎng)絡(luò)上現(xiàn)有的框架都收集起來(lái)，方便網(wǎng)友們的選擇和比較。（框架順序不代碼框架的好壞）

Bootstrap

Bootstrap 就不多做介紹了屬于老牌框架了，國(guó)內(nèi)教程地址：www.bootcss.com（非官網(wǎng)），該網(wǎng)站目前已經(jīng)整理了從2.0~5.0的所有教程資料。

layui

layui國(guó)人開(kāi)發(fā)。layui是一套開(kāi)源的 Web UI 解決方案，采用自身經(jīng)典的模塊化規(guī)范，并遵循原生 HTML/CSS/JS 的開(kāi)發(fā)方式，極易上手，拿來(lái)即用。其風(fēng)格簡(jiǎn)約輕盈，而組件優(yōu)雅豐盈，從源代碼到使用方法的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合網(wǎng)頁(yè)界面的快速開(kāi)發(fā)。layui 區(qū)別于那些基于 MVVM 底層的前端框架，卻并非逆道而行，而是信奉返璞歸真之道。準(zhǔn)確地說(shuō)，它更多是面向后端開(kāi)發(fā)者，你無(wú)需涉足前端各種工具，只需面對(duì)瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來(lái)。

Semantic UI

Semantic UI—完全語(yǔ)義化的前端界面開(kāi)發(fā)框架，跟 Bootstrap 和 Foundation 比起來(lái)，還是有些不同的，在功能特性上、布局設(shè)計(jì)上、用戶體驗(yàn)上均存在很多差異。

Bulma

作為一個(gè)基于Flexbox的開(kāi)源框架，Bulma在全世界擁有超過(guò)20萬(wàn)名開(kāi)發(fā)用戶。它可以通過(guò)可視化的組件，讓開(kāi)發(fā)人員了解其運(yùn)作的過(guò)程。該前端框架通過(guò)各種技術(shù)，為前端開(kāi)發(fā)人員提供了一種內(nèi)聚(cohesive)的界面。此外，由于它使用了響應(yīng)式模板，因此我們可以更好地專注于網(wǎng)站的內(nèi)容，而不是代碼的編寫(xiě)。

PureCSS

由Yahoo開(kāi)發(fā)的PureCSS，提供了一組體積小、且具有快速響應(yīng)能力的CSS模塊。它非常適合開(kāi)發(fā)那些界面美觀且功能不同的項(xiàng)目。PureCSS具有快速響應(yīng)能力的內(nèi)置設(shè)計(jì)，以及最小體積的標(biāo)準(zhǔn)化CSS，而且它們都是免費(fèi)的!

Tailwind CSS

Tailwind CSS 是一個(gè)功能類優(yōu)先的 CSS 框架,它由 Adam Wathan 創(chuàng)建。本站提供 Tailwind CSS 官方文檔中文翻譯致力于為廣大國(guó)內(nèi)開(kāi)發(fā)者提供準(zhǔn)確的中文文檔,助力開(kāi)發(fā)者掌握并使用這一框架。

AXUI

ax前端框架的特點(diǎn)是：能用css寫(xiě)的不用js；能用js寫(xiě)的不用插件；能用插件的不重復(fù)使用插件。通過(guò)觀察本框架的核心文件會(huì)發(fā)現(xiàn)核心文件只有ax.css和ax.js，加載速度飛快。ax前端框架對(duì)一些常用的功能進(jìn)行集成處理，比如美化滾動(dòng)條、菜單、cookie等，在演示頁(yè)面復(fù)制代碼即可使用。

Amaze UI

Amaze UI 以移動(dòng)優(yōu)先（Mobile first）為理念，從小屏逐步擴(kuò)展到大屏，最終實(shí)現(xiàn)所有屏幕適配，適應(yīng)移動(dòng)互聯(lián)潮流。

Foundation

Foundation 是一個(gè)適用于任何設(shè)備、媒介和可訪問(wèn)性的框架。Foundation是一個(gè)響應(yīng)式前端框架系列，它可以讓你輕松設(shè)計(jì)出漂亮的響應(yīng)式網(wǎng)站、應(yīng)用程序和電子郵件，在任何設(shè)備上看起來(lái)都非常漂亮。Foundation具有語(yǔ)義性、可讀性、靈活性和完全可定制性。

ZUI

一個(gè)基于 Bootstrap 深度定制開(kāi)源前端實(shí)踐方案，幫助你快速構(gòu)建現(xiàn)代跨屏應(yīng)用。

Uikit

UIkit 是 YOOtheme 團(tuán)隊(duì)開(kāi)發(fā)的一款輕量級(jí)、模塊化的前端框架，可快速構(gòu)建強(qiáng)大的web前端界面。UIKit 提供了全面的 HTML、CSS 及 JS 組件，它們使用簡(jiǎn)單，容易定制和擴(kuò)展。

Pintuer

拼圖前端框架 Pintuer.com：國(guó)內(nèi)優(yōu)秀的HTML、CSS、JS跨屏響應(yīng)式開(kāi)源前端框架，使用最新瀏覽器技術(shù)，為快速的前端開(kāi)發(fā)提供一系列的顏色、文本、排版、內(nèi)容、媒體、按鈕、表單、元件、導(dǎo)航、組件等樣式工具包，占用資源小，使用拼圖可以快速構(gòu)建簡(jiǎn)潔、優(yōu)雅而且自動(dòng)適應(yīng)手機(jī)、平板、桌面電腦等設(shè)備的前端界面，讓前端開(kāi)發(fā)像玩拼圖游戲一下輕松靈活。

H-ui

H-ui前端框架系統(tǒng)是基于 HTML、CSS、JAVASCRIPT開(kāi)發(fā)的輕量級(jí)web前端框架。H-ui是根據(jù)中國(guó)現(xiàn)階段網(wǎng)站特性和程序員開(kāi)發(fā)習(xí)慣，在bootstrap基礎(chǔ)上，吸取眾家框架之長(zhǎng)，融合開(kāi)發(fā)者自己的思想，進(jìn)行深度開(kāi)發(fā)，提煉出一套適合中國(guó)開(kāi)發(fā)者的HTML和CSS規(guī)范。開(kāi)源免費(fèi)，簡(jiǎn)單靈活，兼容性好，一經(jīng)推出深受國(guó)內(nèi)廣大web開(kāi)發(fā)者喜愛(ài)。

跨屏UI

如果說(shuō)Boostrap提供了一個(gè)可靠的網(wǎng)頁(yè)元素UI組件，來(lái)構(gòu)建一個(gè)網(wǎng)頁(yè)，那么跨屏UI框架，則在bootstrap基礎(chǔ)上提供了更為完整的網(wǎng)頁(yè)組件，例如“關(guān)于我們”、“聯(lián)系我們”，“相冊(cè)”，“產(chǎn)品”等等組件。

Milligram

　　Milligram雖然非常輕小，但功能依舊不差，它具有一整套web開(kāi)發(fā)工具，并且充分利用了CSS3規(guī)范中的各種原理來(lái)幫助開(kāi)發(fā)人員快速開(kāi)發(fā)。

暫時(shí)收集了這些框架，你可以根據(jù)實(shí)際項(xiàng)目的需求，進(jìn)行選擇，正式使用之前請(qǐng)先測(cè)試代碼，確保你采用的框架不會(huì)出現(xiàn)CSS或HTML的瀏覽器兼容性問(wèn)題。

~~~感謝閱讀，順便點(diǎn)個(gè)贊，歡迎關(guān)注【Yimao軟件】，謝謝~~~

面試官：你知道移動(dòng)端適配嗎？

---

**開(kāi)篇：移動(dòng)端適配的重要性**

在移動(dòng)互聯(lián)網(wǎng)飛速發(fā)展的今天，移動(dòng)端適配已成為每一位前端開(kāi)發(fā)者必備的核心技能之一。面對(duì)市場(chǎng)上琳瑯滿目的手機(jī)型號(hào)和屏幕尺寸，如何讓同一套代碼在不同設(shè)備上呈現(xiàn)出近乎完美的視覺(jué)效果和交互體驗(yàn)，是每一位面試官都會(huì)關(guān)心的問(wèn)題。本文將帶你深入探討移動(dòng)端適配的核心技術(shù)和策略，助力你從容應(yīng)對(duì)面試挑戰(zhàn)。

---

**【第一部分】理解移動(dòng)端適配的挑戰(zhàn)**

**標(biāo)題：設(shè)備碎片化與分辨率多樣化**

隨著智能手機(jī)硬件的快速發(fā)展，各品牌、各型號(hào)設(shè)備的屏幕尺寸、分辨率和像素密度差異巨大。這意味著，如果不對(duì)頁(yè)面進(jìn)行適配，可能會(huì)出現(xiàn)內(nèi)容錯(cuò)位、字體大小不一、圖片模糊等問(wèn)題。

例如，iPhone 6與iPhone 13 Pro Max的物理尺寸和分辨率相差甚遠(yuǎn)，前者分辨率為750 x 1334，后者則是1284 x 2778。因此，我們必須有一套有效的適配策略來(lái)應(yīng)對(duì)這種情況。

---

**【第二部分】viewport元標(biāo)簽與設(shè)備像素比**

**標(biāo)題：viewport元標(biāo)簽與 DPR 的秘密**

適配的第一步是設(shè)置`viewport`元標(biāo)簽，以控制頁(yè)面在移動(dòng)設(shè)備上的縮放程度和布局視口的大小：

```html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

```

這里`device-width`意味著布局視口的寬度等于設(shè)備的獨(dú)立像素寬度，`initial-scale=1.0`表示初始縮放比例為1，即一個(gè)CSS像素對(duì)應(yīng)一個(gè)設(shè)備獨(dú)立像素。

同時(shí)，了解設(shè)備像素比（DPR）的概念也很關(guān)鍵，它是設(shè)備物理像素與CSS像素的比例，用于解決高清屏下的圖像模糊問(wèn)題：

```javascript

// 獲取設(shè)備像素比

let dpr=window.devicePixelRatio || 1;

```

---

**【第三部分】CSS單位與適配策略**

**標(biāo)題：Flexbox、Grid布局與CSS單位REM、VW/VH**

- **Flexbox與Grid布局**：利用現(xiàn)代CSS布局模式，如Flexbox和Grid，可以更好地處理元素的彈性布局，減少因設(shè)備尺寸變化導(dǎo)致的布局混亂。

```css

.container {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.item {

flex-basis: calc(33.33% - 20px);

}

```

- **CSS單位REM與VW/VH**：REM基于根元素字體大小，允許我們基于頁(yè)面全局字體大小進(jìn)行適配；VW/VH基于視口寬度和高度，可以很好地應(yīng)對(duì)屏幕尺寸變化。

```css

html {

font-size: 16px; /* 基準(zhǔn)字體大小 */

}

.box {

width: 80vw; /* 盒子寬度為視口寬度的80% */

height: 50vh; /* 盒子高度為視口高度的50% */

}

@media screen and (min-width: 768px) {

html {

font-size: 20px; /* 在大屏設(shè)備上增大基準(zhǔn)字體大小 */

}

}

```

---

**【第四部分】響應(yīng)式設(shè)計(jì)與媒體查詢**

**標(biāo)題：使用媒體查詢實(shí)現(xiàn)多設(shè)備適配**

媒體查詢是CSS3的一個(gè)強(qiáng)大特性，可以幫助我們根據(jù)不同設(shè)備的特性（如視口寬度、設(shè)備像素比等）應(yīng)用不同的CSS樣式：

```css

/* 為小于600px寬度的設(shè)備設(shè)置樣式 */

@media screen and (max-width: 600px) {

.header {

font-size: 18px;

}

}

/* 為大于等于600px寬度的設(shè)備設(shè)置樣式 */

@media screen and (min-width: 600px) {

.header {

font-size: 24px;

}

}

```

---

**【第五部分】CSS框架與預(yù)處理器的適配功能**

**標(biāo)題：Bootstrap、TailwindCSS與PostCSS的適配解決方案**

許多CSS框架（如Bootstrap）和預(yù)處理器（如PostCSS）都提供了便捷的適配工具和策略。例如，Bootstrap的柵格系統(tǒng)和響應(yīng)式工具類，TailwindCSS的內(nèi)置響應(yīng)式前綴，以及PostCSS的插件如postcss-pixel-to-viewport，都可以極大地簡(jiǎn)化移動(dòng)端適配工作。

---

**結(jié)語(yǔ)：**

移動(dòng)端適配是一項(xiàng)涵蓋多個(gè)維度的綜合技術(shù)，包括但不限于viewport設(shè)置、CSS單位選取、布局模式、媒體查詢以及框架和預(yù)處理器的應(yīng)用。只有充分理解并掌握這些技術(shù)，才能在面臨面試官“你知道移動(dòng)端適配嗎？”這個(gè)問(wèn)題時(shí)，自信滿滿地給出滿意的答案，并在實(shí)際開(kāi)發(fā)中游刃有余地應(yīng)對(duì)各種設(shè)備適配挑戰(zhàn)。持續(xù)關(guān)注前沿技術(shù)，不斷積累實(shí)踐經(jīng)驗(yàn)，你將在移動(dòng)端適配領(lǐng)域攀登更高的山峰。