html - MDC 网格布局不会根据设备更改

Question

在尝试实现网格布局时，当我提供特定于设备的单元格跨度值时，例如“mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-6-desktop”。布局在桌面和移动设备上保持不变。然而，根据 MDC 的文档，单元格应该根据查看内容的设备进行更新。

你可以在bodana.napcraft.in看到下面提到的工作状态代码

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">

<!-- Newsletter Section Begins-->
<section id="sixthSection">
  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">

      <!-- Row Begins -->
      <div class="mdc-layout-grid__cell  mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-6-desktop">
        <img src="/resources/images/newsletter.png" style="width: 100%" />
      </div>
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-12-phone" style="padding-top: 5vh; background: #E3C5B8;">
        <center>


          <span class="secondaryTitle">THE DEW'S NEWSLETTER</span><br/><br/>
          <span class="largeText">To receive more freebies, latest news and so much more!</span></center><br/>

        <div class="mdc-layout-grid__inner">

          <!-- Row Begins -->
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
            <div class="mdc-text-field" style="width: 100%">
              <input class="mdc-text-field__input" id="text-field-hero-input">
              <div class="mdc-line-ripple"></div>
              <label for="text-field-hero-input" class="mdc-floating-label">Name</label>
            </div>
          </div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
          <!-- Row Ends -->

          <!-- Row Begins -->
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
            <div class="mdc-text-field" style="width: 100%">
              <input class="mdc-text-field__input" id="text-field-hero-input">
              <div class="mdc-line-ripple"></div>
              <label for="text-field-hero-input" class="mdc-floating-label">Email</label>
            </div>
          </div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
          <!-- Row Ends -->


          <!-- Row Begins -->
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
            <center><button class="mdc-button mdc-button--outlined subscribeButton">SUBSCRIBE</button></center>
          </div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
          <!-- Row Ends -->
          </center>
        </div>
        <!-- Row Ends -->

      </div>
    </div>
</section>

我想了解为什么我的网格没有根据设备更新。

Answer 1

要使网格布局正常工作，需要在标记中插入以下元标记:

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