css - 在 Angular Material 中生成密度是什么意思？

Question

Angular Material source code具有此属性:

// Whether density should be generated by default.
$_mat-theme-generate-default-density: true !default;

Angular Material 所说的生成密度是什么意思？一个简单的 CSS 示例说明它会很棒。

Answer 1

遵循 Material 设计规范。 Angular Material 正在实现配置 density of components 的功能.

密度的均值是关于使组件更容易找到、优先操作并使其更可见。查看更多信息 Material design density usage

对于简单的 css 示例，它可以是一个框列表，它的填充随视口(viewport)变化而变化。

运行代码片段并更改窗口视口(viewport)大小。

.container {
  display: flex;
  flex-direction: column;
}

.box {
  box-sizing: border-box;
  padding: 10vh 5vw;
  margin: 5px;
  background-color: #ccc;
  width: 100%;
}

<div class="container">
 <div class="box">1</div>
 <div class="box">2</div>
 <div class="box">3</div>
</div>