Material Design 是由 Google 推出的一套设计语言，其目标是创建一种统一的设计风格，使用户能够更加流畅地使用移动设备和 Web 应用程序。其中，布局与排版规范是 Material Design 中非常重要的一部分，其能够帮助设计师和开发人员快速创建具有一致性和美观度的界面。
布局规范
Material Design 布局规范的核心是‘可变网格’。这种布局能够适应各种大小和分辨率的设备，从而提供更加协调和一致的体验。为了看到这种布局，你可以通过在 HTML 文件中加入以下代码：
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell--span-6"></div>
<div class="mdc-layout-grid__cell--span-6"></div>
</div>
</div>其中，.mdc-layout-grid__inner 定义了网格内部的容器，.mdc-layout-grid__cell--span-x 定义了每个单元格的宽度。在上面的代码中，有两个单元格，在可变网格中占据了各自的一半宽度。
此外，Material Design 中布局规范还包括卡片（Cards）、抽屉（Drawers）、列表（Lists）和表格（Tables）等其他组件，这些组件能够帮助开发者更好地定义页面的结构和层次。
排版规范
在 Material Design 中，排版规范不仅包括字体大小和样式，还包括文字排列、行距、颜色等内容。以下是一些排版规范：
文字应该呈现出清晰、易于阅读的特质。推荐使用谷歌产品自带的 Noto 字体。
文字大小应该适应不同的设备尺寸和屏幕方向，最小字体大小应该为 12px。
行距应该不小于 1.5。这将有助于提高可读性并使页面更易于阅读。
使用灰度文本色调代替黑色。这样做可以降低文字的强度，使页面更具层次感。
对于重要的文本内容，可以使用强调（Bold）或斜体（Italic）。
在排版过程中，应该注意对齐和距离以及单元格和列之间的间距。
当你应用了这些规范时，页面会看起来更加一致、整洁和易于阅读，这将大大提高用户对页面的体验。
示例代码
以下是一个使用 Material Design 布局和排版规范的示例页面。你可以将其保存为 .html 文件并在浏览器中打开。
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------ ------ --- ------------------
----- ----------------
----------------------------------------------------------------------------------------- --
----- ---------------- --------------------------------------------------------------------- --
-------
-- ------ ------ --
---- -
------------ --------- -----------
---------- -----
------------ ----
------ -----
-
------- -
-------- -----
----------------- --------
------ -----
----------- -------
---------- -----
------------ -----
-
----- -
------- --- ----- -----
------- -----
----------- --- --- --- -----
-------------- ----
-
------------- -
-------- -----
-
----------- -
---------- -----
------------ -----
-------------- -----
-
---------- -
---------- -----
-------------- -----
-
------- -
----------------- --------
------ -----
-------- --- -----
------- -----
-------------- ----
---------- -----
------- --------
-
--------
-------
------
---- ----------------------- ------ ------ --- ----------------
---- ------------------------
---- -------------------------------
---- --------------------------------------
---- -------------
---- ---------------------
---- ----------------------- -----------
---- ----------------------- ----- ----- --- ----- ----------- ---------- ----- ----- ---------
--------- ---- --- --------- ------ --- ----- --- ------ -------- ------- -- ---- -------------
------- ------------------- -------------
------
------
------
---- --------------------------------------
---- -------------
---- ---------------------
---- ----------------------- -----------
---- ----------------------- ----- ----- --- ----- ----------- ---------- ----- ----- ---------
--------- ---- --- --------- ------ --- ----- --- ------ -------- ------- -- ---- -------------
------- ------------------- -------------
------
------
------
---- --------------------------------------
---- -------------
---- ---------------------
---- ----------------------- -----------
---- ----------------------- ----- ----- --- ----- ----------- ---------- ----- ----- ---------
--------- ---- --- --------- ------ --- ----- --- ------ -------- ------- -- ---- -------------
------- ------------------- -------------
------
------
------
---- --------------------------------------
---- -------------
---- ---------------------
---- ----------------------- -----------
---- ----------------------- ----- ----- --- ----- ----------- ---------- ----- ----- ---------
--------- ---- --- --------- ------ --- ----- --- ------ -------- ------- -- ---- -------------
------- ------------------- -------------
------
------
------
---- --------------------------------------
---- -------------
---- ---------------------
---- ----------------------- -----------
---- ----------------------- ----- ----- --- ----- ----------- ---------- ----- ----- ---------
--------- ---- --- --------- ------ --- ----- --- ------ -------- ------- -- ---- -------------
------- ------------------- -------------
------
------
------
---- ---------------------------------------
-------
-------
----
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
----
------- -- ------ ------
------- -- ------ ------
------- -- ------ ------
-----
--------
--------
------
------
------
-------
-------结论
Material Design 布局和排版规范提供了一种简单、协调和一致的方法来构建应用程序和网站。通过应用这些规范，可以提高用户对界面的体验，也可以帮助设计师和开发人员更好地完成工作。我推荐查看更多 Material Design 的文档以及实现，以进一步学习如何最好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770b3cce9a7045d0d801a55