Materialise grid s12 无法在移动视图或 Chrome 开发者工具上运行
我正在使用 Materialise 在我正在开发的 Google Web 应用程序上进行样式设置和网格处理，但我无法让网格在移动设备上运行。
我确实将 Materialize 文档中建议的代码放在我的部分中，并且也按照这个问题的建议，Materialize grid s12 无法在移动视图中工作，但它对我不起作用。
<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>
神不在的星期二1回答
-
子衿沉夜
很简单 - 您没有正确使用网格标记。如果您遵循文档中的指南，您将看到响应式网格由三个元素组成，并以非常特殊的方式嵌套：1. 容器这是最外面的元素，所有东西都位于其中。您可以每页一个，或每个部分一个，具体取决于设计，但很少会在一行或一列内有一个容器。它的名字暗示了它的作用 - 它包含内容，即设置它可以是的最大宽度：手机：90%平板电脑：85%台式机：70%2. 行行位于容器中。它们跨越容器，具有用于间隔的边距底部，并用于对列进行分组。3. 上校列位于行内，这些是具有媒体查询样式以提供响应能力的实际元素：s12 = 在所有屏幕宽度下占用 12 列（一半空间）s6 = 在所有屏幕宽度下占用 6 列（一半空间）m6 在平板电脑宽度上占据 6 列（一半空间）l6 = 在桌面宽度上占据 6 列（一半空间）您可以将行嵌套在列内以提供嵌套网格，但很少需要 - 您可以使用 flexbox 在列内设置间距。结构非常简单但非常具体：<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
随时随地看视频慕课网APP
相关分类
Html5