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>

预期的列布局＆amp;计数如下：

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

外部数字/列可能是广告的空间或只是空格，否则看起来很糟糕。

问题是：即使刷新页面后它也没有响应。我尝试过Chromium Linux移动/平板电脑仿真和Nexus 5 Firefox＆amp;铬。无处不在，使用桌面版本。

Answer 1

MDL要求您将其包含在标题中。

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

顺便说一下，我没有在“入门指南”中看到它，可能会将其添加到那里？

工作CodePen

Answer 2

添加

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

到

<head></head>

Answer 3

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

中

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

我为你做了一个jsfiddle例子。只需展开窗口滑块，您就会看到您想要的东西。

MDL网格布局无响应

3 个答案: