Question

我无法让XY网格中的列响应较小的窗口。在台式机上，看起来不错，我调整了窗口堆栈的大小，就像在响应式设计中所期望的那样。由于某种原因，在移动设备上，它只会不断缩小。我以为这可能是其他模块的干扰，但我将当前的项目简化为绝对的基础知识，并且它仍然以这种方式运行。

这是不正常的，因为我看到Foundation模板的行为符合人们的预期。我是Foundation的新手，所以我希望我只是缺少一些非常简单的东西。

Codepen：https://codepen.io/anon/pen/jXOJLQ 如果将桌面浏览器的大小调整为小于640像素，它将按预期工作。但是，如果您使用手机（或使用Chrome的移动视图），它只会按比例缩小，永远不会放开两栏式布局。

$(document).foundation();

<head>
  <!-- Import Foundation, Foundation MotionUI and KaTeX Stylesheets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css"
    integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA=="
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-ui@1.2.3/dist/motion-ui.min.css" />

  <!-- Import jQuery, Foundation, KaTeX and KaTeX Auto-Render -->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
    crossorigin="anonymous"></script>

</head>


<body>
  <article class='grid-container'>
    <div id='content' class="grid-x grid-margin-x">
      <div class="medium-6 cell">
        <div class='card'>
          <div class='card-divider'>
            Column 1
          </div>
          <div class='card-section' style='z-index:10;'>
            Hello world!
          </div>
        </div>
      </div>

      <div class="medium-6 cell">
        <div class="card">
          <div class='card-divider'>Column 2</div>
          <div class="card-section">
            Hello world!
          </div>
        </div>
      </div>
    </div>
  </article>
</body>

Answer 1

确保您的头部没有丢失视口元标记。

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

在移动设备上忽略了XY网格断点？

1 个答案: