Question

我使用cdn中的mdl 1.1.3作为演示项目。我的布局是

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div1</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div2</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div3</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div4</div>
</div>

mdl @media查询为我提供了6-col-cell的父div的75％。

@media（min-width：480px）和（max-width：839px）

.mdl-cell - 1-col，12.5％
.mdl-cell - 2-col，25％
.mdl-cell - 3-col，37.5％
.mdl-cell - 4-col，50％，应为25％
.mdl-cell - 5-col，62.5％
.mdl-cell - 6-col，75％，应为50％
.mdl-cell - 7-col，87.5％
.mdl-cell - 8-col 100％
.mdl-cell - 9-col 100％
.mdl-cell - 10-col 100％
.mdl-cell - 11-col 100％
.mdl-cell - 12-col 100％

mdl是错还是我做错了什么？

Answer 1

MDL网站给出了答案.MDL对网格系统的方法与其他css框架不同。对于不同的屏幕尺寸，最大单元的数量是不同的。

用于桌面屏幕的12个单元格
8片细胞
4个手机小区

对于像上面这样的简单布局说我们必须像这样编码

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div1</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div2</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div3</div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div4</div>
</div>

网格系统坏了吗？

1 个答案: