我在让我的代码:( 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
外面的数字/列可能是广告空间或只是空白空间，否则看起来很糟糕。
问题是:它没有响应，即使在刷新页面后也是如此。我尝试了 Chromium Linux 移动/平板电脑仿真和 Nexus 5 Firefox & Chrome。到处都使用桌面版。
最佳答案
MDL 要求您将其包含在 header 中。
<meta name="viewport" content="width=device-width, initial-scale=1">
顺便说一句，我没有在入门指南中看到它，也许可以将它添加到那里？
工作 CodePen
关于layout - MDL 网格布局没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33289157/