和.mdl-typography-display-1中，分別添加了45px和34px的字體尺寸值：

結(jié)論

材料設(shè)計(jì)Lite的設(shè)計(jì)旨在與所有現(xiàn)代瀏覽器兼容，包括Chrome，F(xiàn)irefox，Safari和Edge。但是，在較舊的瀏覽器或不完全支持現(xiàn)代網(wǎng)絡(luò)標(biāo)準(zhǔn)的瀏覽器中，它可能無法正常工作。

首頁

web前端

css教學(xué)

Google對(duì)材料設(shè)計(jì)精簡(jiǎn)版的實(shí)用介紹

William Shakespeare

Feb 22, 2025 am 09:01 AM

Google對(duì)材料設(shè)計(jì)精簡(jiǎn)版的實(shí)用介紹

>在2014年，Google發(fā)表了材料設(shè)計(jì)規(guī)範(fàn)，旨在匯總固體設(shè)計(jì)原理，跨不同平臺(tái)和設(shè)備的一致用戶體驗(yàn)以及技術(shù)和科學(xué)創(chuàng)新。

2015年7月，

看到Google Release Material Design Lite，這是一個(gè)前端圖書館，旨在使材料設(shè)計(jì)外觀和感覺更加容易地添加到網(wǎng)站上。

在本文中，我將重點(diǎn)介紹以下材料設(shè)計(jì)的基本原理和組成部分，以及如何使用材料設(shè)計(jì)Lite（MDL）庫來實(shí)施它們：

鑰匙要點(diǎn)

Google的材料Design Lite（MDL）是一個(gè)前端庫，可簡(jiǎn)化材料設(shè)計(jì)美學(xué)的實(shí)現(xiàn)，使其更容易在各種平臺(tái)上保持一致的用戶體驗(yàn)。可以使用Google的CDN用於CSS和JavaScript文件，也可以通過自己下載和託管文件，並提供適用於Bower和NPM等各種環(huán)境的詳細(xì)設(shè)置說明。

密鑰MDL組件（例如佈局，卡片和選項(xiàng)卡）旨在響應(yīng)迅速且模塊化，利用Flexbox和BEM方法來促進(jìn)更結(jié)構(gòu)化和可擴(kuò)展的CSS體系結(jié)構(gòu)。
演示項(xiàng)目
>本文的演示項(xiàng)目稱為Kaptain Kitty。這是一個(gè)HTML模板，旨在說明如何將本文中討論的材料設(shè)計(jì)概念和MDL組件應(yīng)用於網(wǎng)頁。
>如果您想將材料設(shè)計(jì)放在其步伐上，那麼您將需要您喜歡的代碼編輯器和現(xiàn)代最新的瀏覽器。
您可以在Codepen上查看演示項(xiàng)目及其源代碼：

>在Codepen上使用sitepoint（@sitepoint）的材料設(shè)計(jì)Lite參見筆模板。

讓我們開始。

在您的項(xiàng)目中包括材料設(shè)計(jì)精簡(jiǎn)版

在您的項(xiàng)目中包括MDL時(shí)，您有以下選項(xiàng)：>

>使用[Google的CDN]（內(nèi)容輸送網(wǎng)絡(luò)）加載必要的CSS和JavaScript文件。
>下載縮小的CSS和JavaScript文件並將其託管在您的服務(wù)器上。 >

如果您使用Bower來管理項(xiàng)目，則可以在Bower_components文件夾中鍵入以下命令以安裝MDL庫文件：Bower install install install seltim inaters-design-lite -save-save-save

如果NPM是您選擇的軟件包管理器，請(qǐng)?jiān)贜ode_modules文件夾中運(yùn)行以下命令以安裝MDL文件：NPM安裝材料 - design-lite-save-save-save

Google建議使用在其CDN上託管的CSS和JavaScript文件。這是您在本文的“演示”頁面中找到的方法。

> 首先，在HTML文檔的部分中，包括對(duì)MDL CSS文件，Google材料設(shè)計(jì)圖標(biāo)和該項(xiàng)目的樣式表的參考，您將在其中添加自己的自定義：

接下來，就在關(guān)閉標(biāo)籤之前，向MDL JavaScript文件添加引用：>

材料設(shè)計(jì)中的版式

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
</span><span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>

材料設(shè)計(jì)的類型用於英語和類似英語的語言（拉丁語，希臘語和西里爾字符）是Roboto和Noto。

noto還支持諸如中文，日語和韓語等密集的腳本，以及東南亞和中東語言等高個(gè)子腳本，例如阿拉伯語，印地語等。 <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script>要在項(xiàng)目中包含Roboto Font文件，請(qǐng)?jiān)贖TML文檔的部分的頂部添加以下標(biāo)籤：>

對(duì)於拉丁語，希臘和西里爾字符，材料設(shè)計(jì)規(guī)范建議的印刷量表為12、14、16、20和34。您可以通過將一組特定類別添加到將MDL添加到標(biāo)記。

例如，將.mdl-typography-display-2添加到

>>

和.mdl-typography-display-1中，分別添加了45px和34px的字體尺寸值：

> MDL有許多類具有印刷量表，可訪問性和可讀性原則的類。這使得更容易顯示美麗的文本內(nèi)容，無論使用用於訪問它的設(shè)備而言，它都可以讀取愉快的內(nèi)容。

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span>

>有關(guān)排版課程的完整列表，請(qǐng)?jiān)L問GitHub上的MDL版式組件頁面。

為您的MDL項(xiàng)目選擇顏色

請(qǐng)注意MDL庫樣式表文件名：。名稱指向樣式表中實(shí)現(xiàn)的材料設(shè)計(jì)調(diào)色板。默認(rèn)調(diào)色板使用靛藍(lán)作為原色，粉紅色作為重音顏色。但是您不會(huì)被這些。以下是Material Design關(guān)於如何制定自定義調(diào)色板以及如何使用MDL實(shí)施的建議。

材料設(shè)計(jì)顏色原理

材料設(shè)計(jì)喜歡結(jié)合大膽和柔和的色彩，陰影和亮點(diǎn)：

顏色應(yīng)該是出乎意料且充滿活力的。

Google材料設(shè)計(jì)規(guī)範(fàn)

但是，這並不等於在網(wǎng)頁上濺起隨機(jī)顏色。相反。

材料設(shè)計(jì)提供了各種美麗的調(diào)色板，可以和諧地一起使用。為了使選擇顏色更容易，調(diào)色板中的每種顏色都有一個(gè)數(shù)字標(biāo)籤以及十六進(jìn)制的顏色值來識(shí)別它。材料設(shè)計(jì)指南表示500種顏色是原色。其他顏色最好用作強(qiáng)調(diào)顏色。

>為網(wǎng)站制定自定義顏色選擇時(shí)，材料設(shè)計(jì)建議您從主要調(diào)色板中挑選三種色調(diào)，並從次要調(diào)色板中挑選一種口音顏色。這是一個(gè)示例：

>將重點(diǎn)顏色的使用限制為鏈接，主操作按鈕以及某些組件（例如開關(guān)和滑塊）。避免使用重音顏色進(jìn)行身體文本： Google對(duì)材料設(shè)計(jì)精簡(jiǎn)版的實(shí)用介紹

>此外，材料設(shè)計(jì)指南會(huì)使用頁面大面積和應(yīng)用程序欄中的重音顏色來勸阻。尤其重要的是不要在浮動(dòng)動(dòng)作按鈕和背景下使用相同的顏色：> Google對(duì)材料設(shè)計(jì)精簡(jiǎn)版的實(shí)用介紹

>現(xiàn)在您對(duì)材料設(shè)計(jì)顏色指南有了深入的了解，現(xiàn)在該為您的MDL項(xiàng)目做出了很棒的顏色選擇了。這是如何。

Google對(duì)材料設(shè)計(jì)精簡(jiǎn)版的實(shí)用介紹 >自定義材料設(shè)計(jì)中的默認(rèn)調(diào)色板

>您可以以以下兩種方式從默認(rèn)的indigo-pink調(diào)色板切換到自己的自定義調(diào)色板。

如果您使用的是Google的CDN，就像我在本文中的演示中所做的那樣，請(qǐng)按照以下步驟：：

>在HTML頁面的部分中的標(biāo)籤的HREF屬性內(nèi)找到MDL樣式表文件的URL

>替換

indigo

用您選擇的原色和

>帶有您喜歡的口音顏色。
例如，假設(shè)您從材料設(shè)計(jì)調(diào)色板中選擇的顏色是藍(lán)綠色，則是琥珀色的口音。以下是Google CDN上託管的MDL樣式表的URL。
```
<link rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
<link rel="stylesheet"
 href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/styles.css">
```
你完成了！

>如果您希望在服務(wù)器上託管編譯和縮小的MDL文件，則MDL網(wǎng)站已涵蓋您。在這裡，您可以找到自定義和預(yù)覽工具，該工具使您可以從交互式色輪中選擇一個(gè)主要的和強(qiáng)調(diào)的調(diào)色板。然後，您可以為所選主題下載CSS，然後將其直接插入您的項(xiàng)目：>

>本文的HTML演示使用默認(rèn)的indigo-Pink調(diào)色板，但是您可以使用上面概述的任何一種方法自由嘗試嘗試不同的顏色選擇。
>
> MDL佈局組件
MDL提供許多常用的Web組件，包括佈局，按鈕，卡片，開關(guān)等。開始使用材料Design Design Lite的佈局組件開始構(gòu)建HTML模板的結(jié)構(gòu)。

mdl將整個(gè)佈局包含在容器元素中，並帶有.mdl-layout .mdl-js-layout。
首先在您的HTML文檔的開頭標(biāo)籤之後添加以下代碼片段：

MDL使用CSS Flexbox進(jìn)行佈局。 .mdl-layout元素是一個(gè)彈性容器，並將flex方向?qū)傩栽O(shè)置為列。
佈局組件包括以下四個(gè)子組件：>
```
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
```
導(dǎo)航佈局

網(wǎng)格

選項(xiàng)卡
- >頁腳
- >
透明標(biāo)頭

固定抽屜，沒有標(biāo)題

固定標(biāo)頭
- 固定的標(biāo)頭和抽屜
- 滾動(dòng)標(biāo)頭
- 瀑布標(biāo)頭 - 在頁面滾動(dòng)上收縮的標(biāo)頭。
- 對(duì)於本文隨附的HTML演示，我選擇了使用選項(xiàng)卡組件的標(biāo)籤導(dǎo)航。選項(xiàng)卡的優(yōu)點(diǎn)在於，儘管內(nèi)容分為相互排斥的屏幕，但所有部分均在同一頁面上。這意味著，當(dāng)用戶單擊選項(xiàng)卡式導(dǎo)航鏈接時(shí)，他們無需等待服務(wù)器在瀏覽器中加載新頁面。所有內(nèi)容都可以立即獲得，從而為現(xiàn)場(chǎng)訪問者創(chuàng)造了愉快的體驗(yàn)。
- >快速構(gòu)建標(biāo)籤標(biāo)題佈局，請(qǐng)按照以下步驟：：
請(qǐng)注意MDL如何使用名稱bem類組織CSS。如果您不熟悉BEM方法論，請(qǐng)大規(guī)模與BEM合作 - Patrick Catanzariti的頂級(jí)開發(fā)人員的建議提供了一項(xiàng)出色的概述。

接下來，代碼部分如下：
>

最後，您需要添加相應(yīng)的內(nèi)容面板：
>
```
<link rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
<link rel="stylesheet"
 href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/styles.css">
```
帶有.is-Active類的面板，默認(rèn)情況下將顯示。
> 在抽屜組件中放置額外內(nèi)容

演示還使用抽屜部分。抽屜是一個(gè)側(cè)面面板，您可以單擊按鈕隱藏和顯示。您也可以選擇保持抽屜打開和修復(fù)，以使其內(nèi)容始終保持在全視圖中。
>

>抽屜非常適合添加小部件，共享按鈕和額外的導(dǎo)航鏈接到網(wǎng)頁，而無需混亂設(shè)計(jì)。

使用您之前添加的代碼段，就在
部分之後，寫下代碼以在佈局中添加抽屜組件：
>

在行動(dòng)中查看這些片段或檢查演示項(xiàng)目的源代碼以完整實(shí)現(xiàn)標(biāo)籤導(dǎo)航和抽屜組件。
```
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
```
材料設(shè)計(jì)Lite Grid

材料設(shè)計(jì)Lite使用12列網(wǎng)格進(jìn)行桌面屏幕，平板電腦的8列網(wǎng)格（最高800px）和4列網(wǎng)格，用於移動(dòng)屏幕尺寸（高達(dá)500px）。
>您將網(wǎng)格列包裹在一個(gè)帶有.mdl網(wǎng)格的容器元素內(nèi)：

默認(rèn)情況下，網(wǎng)格列容器元素跨越屏幕的整個(gè)寬度。如果這不是您想要的，那取決於您在樣式表中定義其寬度。
例如，本文的演示項(xiàng)目同時(shí)實(shí)現(xiàn)了全屏和居中的盒子：
```
<link rel="stylesheet"
 href="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300">
```
通過將每個(gè)部分包裝在不同的.mdl-Grid元素中，並為盒裝部分提供一個(gè)額外的自定義類，以CSS最大寬度為960px。
html：

和CSS：

>另外，如果您想在網(wǎng)格列之間沒有邊距，則MDL有一個(gè)方便的類，您可以將其添加到網(wǎng)格列容器元素- .mdl-grid-no-spacing：
```
<h1 class="mdl-typography--display-2">Title</h1>
<p class="mdl-typography--display-1">
 Sub-title
</p>
```
>

這將為您提供類似的東西：
```
<link rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css">
```
```
<div class="mdl-layout mdl-js-layout">
 
</div>
```
接下來，您通過在.mdl-cell類中添加
元素來構(gòu)建.mdl-Grid元素內(nèi)部的列。這是3列網(wǎng)格的代碼：
>
如果您想覆蓋默認(rèn)列大小，則需要添加一個(gè).mdl-cell - {number} -col類，數(shù)字為1到12。這是2列網(wǎng)格的代碼：

>在Codepen上查看實(shí)時(shí)演示。
```
<div class="mdl-layout
 mdl-js-layout mdl-layout--fixed-header
 mdl-layout--fixed-tabs">
</div>
```
如果您的設(shè)計(jì)需要它，則MDL提供方便的實(shí)用程序類，以在特定的屏幕尺寸上隱藏列：
- .mdl-cell--hide-desktop隱藏了桌面屏幕尺寸（大於840px）
- .mdl-cell-擋板圖將列的列在平板電腦屏幕尺寸（大於480px）上
- > .mdl-cell-隱藏電話隱藏了移動(dòng)屏幕大小（小於480px）
要查看此操作，請(qǐng)?jiān)诓煌钠聊淮笮∩喜榭囱菔卷?xiàng)目的歡迎部分。您很快會(huì)注意到，列表旁邊物品旁邊的裝飾性粉紅色圓圈在小屏幕上不可見：>

材料設(shè)計(jì)Lite卡組件

> Card UI模式已經(jīng)越來越流行了一段時(shí)間，尤其是由於Pinterest等網(wǎng)站。

這是材料設(shè)計(jì)定義卡組件的方式：

卡是一張材料，可作為更詳細(xì)信息的切入點(diǎn)。一張卡可以包含有關(guān)單個(gè)主題的照片，文字和鏈接。
材料設(shè)計(jì)規(guī)範(fàn)

>您可以將不同類型的內(nèi)容添加到一張卡中，但請(qǐng)確保與核心主題有關(guān)。另外，避免在卡中放置過多的信息或太多鏈接和按鈕。相反，將用戶指向?qū)Ｓ庙撁?，在該頁面上，您將有關(guān)該主題的更多詳細(xì)信息。

這是您可以使用MDL卡組件將簡(jiǎn)單卡添加到頁面上的方法：
```
<link rel="stylesheet"
 href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> 
<link rel="stylesheet"
 href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/styles.css">
```
>您將卡內(nèi)容包裝在容器元素中，其中包括.mdl-card類。 .mdl-shadow- {number} dp類讓您可以控制落下陰影的深度：在此類中添加3、4、6、8或16，將導(dǎo)致更深的落下陰影。

接下來，您為以下卡部分添加一個(gè)容器：
>

卡標(biāo)題，使用.mdl-card__title類

卡媒體，使用.mdl-card__media類
使用.mdl-card__supporting-text類
card文本內(nèi)容
如果您的卡包含一個(gè)操作按鈕或類似元素，則使用.mdl-Card__actions類使用卡的卡操作。
>

>最後，您用適當(dāng)?shù)膬?nèi)容充實(shí)了這個(gè)結(jié)構(gòu)
這是codepen上的實(shí)時(shí)摘要：

>請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆材料設(shè)計(jì)Lite卡。

>您還可以通過將適當(dāng)?shù)?mdl-card類添加到帶有.mdl-cell類的元素中，將網(wǎng)格單元格變成卡組件

>您可以在隨附的演示項(xiàng)目中找到這種方法。這是實(shí)現(xiàn)響應(yīng)式瓷磚佈局的好方法：

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script>

結(jié)論

本文全部旨在探索Google的材料設(shè)計(jì)Lite庫，並將其付諸實(shí)踐，以真實(shí)的HTML Web模板。 MDL不是一個(gè)全面的框架，例如Bootstrap。它沒有您的應(yīng)用程序最可能需要的所有組件和樣式。因此，期望自己編寫某些功能。
> 但是，圖書館仍在不斷發(fā)展，這可能會(huì)在以後的發(fā)行版中給我們一些新的東西感到驚訝。此外，網(wǎng)絡(luò)為設(shè)計(jì)師和開發(fā)人員提供了豐富的材料設(shè)計(jì)生態(tài)系統(tǒng)，其中大多數(shù)是免費(fèi)的。
>您可以將本文的HTML模板與MDL網(wǎng)站上的模板一起使用，作為開始嘗試MDL並構(gòu)建您自己的出色材料設(shè)計(jì)項(xiàng)目的另一種資源。
>查看我們最好的材料UI主題指南。
>
什麼是材料設(shè)計(jì)精簡(jiǎn)版（MDL），它與材料設(shè)計(jì)有何不同？
材料設(shè)計(jì)精簡(jiǎn)版（MDL）是Google開發(fā)的設(shè)計(jì)理念，旨在為所有設(shè)備提供統(tǒng)一的用戶體驗(yàn)和平臺(tái)。它是材料設(shè)計(jì)的較輕版本，這是一種綜合設(shè)計(jì)系統(tǒng)，結(jié)合了製作數(shù)字體驗(yàn)的理論，資源和工具。儘管材料設(shè)計(jì)是一種完整的設(shè)計(jì)語言，其中包括大量工具，準(zhǔn)則和組件，但MDL是該系統(tǒng)的子集，提供了更簡(jiǎn)單，更輕巧的框架，易於實(shí)現(xiàn)。這對(duì)於想要?jiǎng)?chuàng)建現(xiàn)代，時(shí)尚的用戶界面而沒有完整材料設(shè)計(jì)系統(tǒng)的複雜性的開發(fā)人員特別有用。
>
>我如何開始使用材料設(shè)計(jì)Lite？使用材料設(shè)計(jì)精簡(jiǎn)版，您需要在項(xiàng)目中包含MDL CSS和JavaScript文件。這些文件可以從官方MDL網(wǎng)站下載，也可以直接從內(nèi)容交付網(wǎng)絡(luò)（CDN）下載。包含這些文件後，您可以開始使用HTML代碼中的MDL組件。 MDL網(wǎng)站提供了全面的文檔和示例，以幫助您了解如何使用每個(gè)組件。
>材料設(shè)計(jì)精簡(jiǎn)版的關(guān)鍵組成部分是什麼？
材料設(shè)計(jì)Lite Lite包含您的各種組件可以用來構(gòu)建用戶界面。這些包括按鈕，複選框，文本字段，滑塊等。每個(gè)組件旨在提供一致，現(xiàn)代的外觀和感覺，並且可以自定義以滿足您的特定需求。 MDL網(wǎng)站為每個(gè)組件提供詳細(xì)的文檔，包括代碼示例和使用指南。
我可以將材料設(shè)計(jì)精簡(jiǎn)版用於商業(yè)項(xiàng)目嗎？它是根據(jù)Apache許可證2.0許可的，只要您遵守許可證的條款。
材料設(shè)計(jì)Lite是一個(gè)輕巧，易於使用的框架，可提供現(xiàn)代，時(shí)尚的外觀和感覺。它旨在使用簡(jiǎn)單，直接的API和全面的文檔易於實(shí)現(xiàn)。與其他設(shè)計(jì)框架相比，MDL不那麼全面，但也不那麼複雜，這對(duì)於那些想要一個(gè)沒有完整框架的開銷的開發(fā)人員來說，它是一個(gè)不錯(cuò)的選擇。

是材料設(shè)計(jì)精簡(jiǎn)版。與所有瀏覽器兼容？

材料設(shè)計(jì)Lite的設(shè)計(jì)旨在與所有現(xiàn)代瀏覽器兼容，包括Chrome，F(xiàn)irefox，Safari和Edge。但是，在較舊的瀏覽器或不完全支持現(xiàn)代網(wǎng)絡(luò)標(biāo)準(zhǔn)的瀏覽器中，它可能無法正常工作。

我可以自定義材料設(shè)計(jì)精簡(jiǎn)版以適合我的品牌嗎？高度可定制。您可以更改顏色，字體和其他設(shè)計(jì)元素，以匹配品牌的視覺標(biāo)識(shí)。 MDL網(wǎng)站提供了有關(guān)如何自定義框架以滿足您需求的詳細(xì)指南。
>
>材料設(shè)計(jì)精簡(jiǎn)版支持響應(yīng)式設(shè)計(jì)嗎？
是的，材料設(shè)計(jì)Lite Lite Lite支持響應(yīng)式設(shè)計(jì)。它包括一個(gè)響應(yīng)式網(wǎng)格系統(tǒng)，該系統(tǒng)允許您創(chuàng)建適合不同屏幕尺寸和方向的佈局。這使得創(chuàng)建在臺(tái)式機(jī)和移動(dòng)設(shè)備上看起來都很好的網(wǎng)站和應(yīng)用程序變得容易。
我如何為材料設(shè)計(jì)精簡(jiǎn)版做出貢獻(xiàn)？歡迎社區(qū)的貢獻(xiàn)。您可以通過報(bào)告錯(cuò)誤，建議新功能或提交代碼更改來做出貢獻(xiàn)。所有貢獻(xiàn)都應(yīng)遵循該項(xiàng)目的貢獻(xiàn)指南，該指南可在MDL網(wǎng)站上找到。
>
>我在哪裡可以找到更多資源來了解材料設(shè)計(jì)精簡(jiǎn)版？開始。它為所有MDL組件提供了全面的文檔，代碼示例和使用指南。此外，還有許多在線教程，文章和視頻可以幫助您更多地了解MDL以及如何在項(xiàng)目中有效使用它。