物化網格 s12 在移動視圖或 Chrome 的開發人員工具中不起作用

Question

我正在使用 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>

Answer 1

簡單 - 您沒有正確使用網格標記。 如果您遵循文檔中的指南，您會看到響應式網格由三個元素組成，以非常特殊的方式嵌套：

1. 集裝箱

這是最外面的元素，一切都在里面。 根據設計，您可以在每頁或每個部分有一個，但很少會在一行或一列中放置一個容器。 它的名字暗示了它的作用 - 它包含內容，即設置它可以是的最大寬度：

手機：90%

平板電腦：85%

台式機：70%

2. 行

行坐在容器中。 它們跨越容器，底部有一個邊距作為間距，並用於對列進行分組。

3.上校

Cols 位於行內，這些是具有媒體查詢樣式以提供響應性的實際元素：

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>

我在這里構建了一個代碼筆來演示基礎知識，並為每個元素添加邊框，以便您可以看到每個元素占用多少空間。

https://materializecss.com/grid.html

物化網格 s12 在移動視圖或 Chrome 的開發人員工具中不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-28 09:02:38

物化網格 s12 在移動視圖或 Chrome 的開發人員工具中不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-28 09:02:38

解決方案1
1 已采納 2020-03-28 09:02:38