Materialize grid s12 在移动视图或 Chrome 的开发人员工具中不起作用答案

【问题标题】：Materialize grid s12 not working in mobile view or on Chrome's developer toolsMaterialize grid s12 在移动视图或 Chrome 的开发人员工具中不起作用
【发布时间】：2020-07-08 06:52:12
【问题描述】：

我正在使用 materialize 在我正在开发的 Google Web App 上设置样式和网格，但我无法让网格在移动设备上运行。

我确实将 Materialize 文档中建议的代码放在了我的部分，并且在这个问题 materialize grid s12 not working in mobile view 上也建议了，但是它对我不起作用。

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

我做错了什么？我的完整 HTML 是

 <!DOCTYPE html>
<html>
 <head>
 <title>Getting started</title>
<base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include("css"); ?>

<style>
  body, html {
    height: 100%;
    margin: 0;
    background-color: #26A69A;
  }
</style>       
</head>
<body>
    <div class="col s12">
<!-- Preloader -->
       <div id='preloader' class="fade col s12"></div>
<!-- End Preloader -->
      <div class="title-text col s12" id="startingtitle">
          Select Language / Επιλογή Γλώσσας
      </div>
      <div id="themessage" class="col s12">
        <div class="row">
          <div class="container divblock">
            <div class="col m2 l3 hide-on-small-only"></div>
            <div class="col s6 m5 l4">
              <a onclick="gettingStarted('EN')"><div class="langselector">
                <div class="langselectorcenter">
                  <img src="<?= flagEN; ?>" class="langselectorimg"> English
                </div>
              </div></a>
            </div>
            <div class="col s6 m5 l4">
              <a onclick="gettingStarted('EL')"><div class="input-field langselector">
                <div class="langselectorcenter">
                  <img src="<?= flagEL; ?>" class="langselectorimg"> Ελληνικά
                </div>
              </div></a>
            </div>
            <div class="col m2 l4 hide-on-small-only"></div>
          </div> <!-- closing container -->
        </div> <!-- closing row -->
      </div> <!-- closing themessage -->

      <div class="bottom col s12">
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

【问题讨论】：

标签： html css google-apps-script web-applications materialize

【解决方案1】：

简单 - 您没有正确使用网格标记。如果您遵循文档中的指南，您会看到响应式网格由三个元素组成，以非常特殊的方式嵌套：

1.容器

这是最外层的元素，一切都在里面。根据设计，您可以每页或每节一个，但很少有一个容器位于一行或一列内。它的名字暗示了它的作用 - 它包含内容，即设置它可以是的最大宽度：

移动：90%

平板电脑：85%

桌面：70%

2。行

行位于容器中。它们跨越容器，有一个用于间距的底部边距，并用于对列进行分组。

3.列

列位于行内，这些是具有媒体查询样式以提供响应的实际元素：

s12 = 在所有屏幕宽度上占用 12 列（空间的一半）

s6 = 在所有屏幕宽度上占用 6 列（空间的一半）

m6 在平板电脑宽度上占据 6 列（空间的一半）

l6 = 占桌面宽度的 6 列（空间的一半）

您可以在 cols 内嵌套行以提供嵌套网格，但很少需要 - 您可以使用 flexbox 在 cols 内设置间距。

结构很简单但很具体：

<div class="container">
   <div class="row">
      <div class="col">
         [content goes here]
      </div>
      <div class="col">
         [content goes here]
      </div>
   </div>
</div>

我已经构建了一个 codepen here 来演示基础知识，并为每个元素添加了边框，以便您可以看到每个元素占用了多少空间。

https://materializecss.com/grid.html

【讨论】：

非常感谢你……真傻！刚刚意识到我的结构！
您知道 Google Web Apps 是否具有响应能力？我制作了几个页面，其中响应能力适用于 codepen，但不适用于 Google Web Apps！我可能做错了什么吗？一个例子是link