MDL 网格布局没有响应

Question

我在获取我的代码：(http://codepen.io/hoschiCZ/pen/rOJmmr) 时遇到问题。

<html>

<head>
  <meta charset="utf-8">
  <title>The title doesn't matter</title>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>

</head>

<body>
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <span class="mdl-layout-title"><center>MDL test</center></span>
      </div>
    </header>
    <div class="mdl-grid" style="margin: 0px">
      <div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
        <!-- An empty block of space, maybe some ads here? -->
      </div>
      <div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
        There is the main text/content located. This has to stay visible at all costs and screen sizes.
        <br><small>Material Design Lite courtesy of Google, Inc.</small>
      </div>
      <div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
        <!-- An empty block of space, maybe some ads here? -->
      </div>
    </div>
  </div>
</body>

</html>

预期的列布局和计数如下：

Desktop 3-6-3
Tablet 1-6-1
Phone 0-4-0

外面的 numbers/cols 可能 space 用于广告或只是空的 space，否则看起来很糟糕。

问题是：它没有响应，即使在刷新页面后也是如此。我尝试了 Chromium Linux mobile/tablet 仿真和 Nexus 5 Firefox & Chrome。到处都是桌面版。

Answer 1

MDL 要求您将其包含在 header.

<meta name="viewport" content="width=device-width, initial-scale=1">

顺便说一句，我没有在入门指南中看到它，是否可以将其添加到那里？

工作CodePen

Answer 2

你的问题是你没有将 .mdl-grid 包裹在 .mdl-layout__content

<div class="mdl-layout__content">
<div class="mdl-grid">row</div>
</div>

我为你做了一个jsfiddle例子。只需展开 window 滑块，您就会看到您想要的内容。

Answer 3

添加

<meta name="viewport" content="width=device-width, initial-scale=1">

进入

<head></head>

MDL 网格布局没有响应

MDL grid layout not responsive

layout

responsive-design

material-design-lite