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

結(jié)論

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

首頁

web前端

css教程

Google對材料設(shè)計精簡版的實用介紹

William Shakespeare

Feb 22, 2025 am 09:01 AM

Google對材料設(shè)計精簡版的實用介紹

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

2015年7月，

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

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

鑰匙要點

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

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

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

讓我們開始。

在您的項目中包括材料設(shè)計精簡版

在您的項目中包括MDL時，您有以下選項：>

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

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

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

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

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

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

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

<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è)計的類型用于英語和類似英語的語言（拉丁語，希臘語和西里爾字符）是Roboto和Noto。

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

對于拉丁語，希臘和西里爾字符，材料設(shè)計規(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)排版課程的完整列表，請訪問GitHub上的MDL版式組件頁面。

為您的MDL項目選擇顏色

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

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

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

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

Google材料設(shè)計規(guī)范

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

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

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

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

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

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

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

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

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

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

>替換

indigo

用您選擇的原色和

>帶有您喜歡的口音顏色。
例如，假設(shè)您從材料設(shè)計調(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ù)覽工具，該工具使您可以從交互式色輪中選擇一個主要的和強(qiáng)調(diào)的調(diào)色板。然后，您可以為所選主題下載CSS，然后將其直接插入您的項目：>

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

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

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

網(wǎng)格

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

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

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

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

最后，您需要添加相應(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)容

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

>抽屜非常適合添加小部件，共享按鈕和額外的導(dǎo)航鏈接到網(wǎ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è)計Lite Grid

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

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

和CSS：

>另外，如果您想在網(wǎng)格列之間沒有邊距，則MDL有一個方便的類，您可以將其添加到網(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)列大小，則需要添加一個.mdl-cell - {number} -col類，數(shù)字為1到12。這是2列網(wǎng)格的代碼：

>在Codepen上查看實時演示。
```
<div class="mdl-layout
 mdl-js-layout mdl-layout--fixed-header
 mdl-layout--fixed-tabs">
</div>
```
如果您的設(shè)計需要它，則MDL提供方便的實用程序類，以在特定的屏幕尺寸上隱藏列：
- .mdl-cell--hide-desktop隱藏了桌面屏幕尺寸（大于840px）
- .mdl-cell-擋板圖將列的列在平板電腦屏幕尺寸（大于480px）上
- > .mdl-cell-隱藏電話隱藏了移動屏幕大?。ㄐ∮?80px）
要查看此操作，請在不同的屏幕大小上查看演示項目的歡迎部分。您很快會注意到，列表旁邊物品旁邊的裝飾性粉紅色圓圈在小屏幕上不可見：>

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

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

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

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

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

這是您可以使用MDL卡組件將簡單卡添加到頁面上的方法：
```
<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)致更深的落下陰影。

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

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

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

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

請參閱codepen上的sitepoint（@sitepoint）的筆材料設(shè)計Lite卡。

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

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

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

結(jié)論

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

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

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

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