实现不在移动视图或Chrome开发工具上工作的网格s12
我正在使用物化来完成我正在开发的Google上的样式和网格，但我无法让网格在移动设备上工作。
我确实在我的部分中把建议的代码放在了物化文档上，并且正如我在这个问题上所建议的那样，实现不在移动视图中工作的网格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>
<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>回答 1
Stack Overflow用户
发布于 2020-03-28 09:02:38
简单--您没有正确地使用网格标记。如果您遵循文档中的指导方针，您将看到响应网格由三个元素组成，它们以非常特殊的方式嵌套：
1.容器
这是最外层的元素，所有的东西都在里面。根据设计的不同，每页或每个部分可以有一个，但很少会在一行或多个区域中有一个容器。它的名称表示它所做的事情--它包含内容，即设置它可以达到的最大宽度：
移动: 90%
片剂: 85%
桌面: 70%
2.行
一排排装在容器里。它们跨越容器，有间距的边距底部，并用于分组列。
3. Col
Cols位于行中，这些是具有媒体查询样式以提供响应性的实际元素：
s12 =在所有屏幕宽度上占12列(一半空间)
s6 =在所有屏幕宽度上占据6列(一半空间)
m6占据6列(占平板宽度的一半)
l6 =占据桌面宽度的6列(一半空间)
您可以在cols内嵌套行以提供嵌套的网格，但是很少需要它--您可以在cols内使用柔性盒来实现间距。
结构非常简单，但非常具体：
<div class="container">
<div class="row">
<div class="col">
[content goes here]
</div>
<div class="col">
[content goes here]
</div>
</div>
</div>我已经构建了一个代码依赖的这里演示基础，并在每个元素中添加了边框，这样您就可以看到每个元素占用了多少空间。
https://stackoverflow.com/questions/60887593
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号