文章/答案/技术大牛

发布

问MDL网格布局没有响应
EN

Stack Overflow用户

提问于 2015-10-22 19:30:11

回答 3查看 4.7K关注 0票数 2

我在让我的代码(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移动/平板电脑模拟和Nexus 5 Firefox & Chrome。在任何地方，桌面版本都被使用。

layout

responsive-design

material-design-lite

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-10-23 13:14:20

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

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

顺便说一句，我没有看到它写在入门指南上，也许是在那里加的？

工作CodePen

票数 3

Stack Overflow用户

发布于 2016-02-17 10:52:35

添加

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

转到

<head></head>

票数 2

Stack Overflow用户

发布于 2015-12-25 04:00:38

您的问题是，您还没有将.mdl-layout__content中的..mdl grid封装起来

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

我为您做了一个小提琴示例。只要展开窗口滑块，你就会看到你想要的东西。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33289157

复制

相似问题

问MDL网格布局没有响应
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MDL网格布局没有响应EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MDL网格布局没有响应
EN