Materialise Grid s12在移动视图或Chrome开发人员工具中不起作用 [英] Materialize grid s12 not working in mobile view or on Chrome's developer tools
问题描述
我正在使用物化在正在使用的Google Web App上进行样式设计和网格化，但是我无法使网格在移动设备上正常工作.
I am using materialize to do my styling and grid on the Google Web App that I am working on, but I cannot get the grid to work on mobile devices.
我确实在我的部分中放置了Materialise文档中建议的代码，并且也针对该问题建议了
I did put the code suggested on Materialize documentation on my section and as also suggested on this question materialize grid s12 not working in mobile view however it is not working for me.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我可能做错了什么?我的完整HTML是
What could I be doing wrong? My full HTML is
<!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>
推荐答案
简单-您未正确使用网格标记.如果您遵循文档中的指南，您将看到响应式网格由三个元素组成，它们以非常特殊的方式嵌套:
Simple - you are not using the grid markup correctly. If you follow the guidelines from the documentation, you'll see that responsive grids are made up of three elements, nested in a very particular way:
1.容器
这是最外面的元素，所有内容都位于其中.根据设计的不同，每页可以有一个，或者每个节可以有一个，但是很少会在行或列中有一个容器.它的名字暗示了它的作用-它包含了内容，即设置了可以的最大宽度:
This is the outermost element and everything sits inside it. You can have one per page, or one per section, depending on the design, but very rarely would you have a container inside a row or a col. It's name suggests what it does - it contains the content, ie, sets a maximum width that it can be:
移动:90％
平板电脑:85％
桌面:70％
2.行
行坐在容器中.它们跨过容器，底部留有一定间距，用于对列进行分组.
Rows sit in containers. They span the container, have a margin bottom for spacing, and are used to group columns.
3.
行位于行内，这些是具有媒体查询样式以提供响应能力的实际元素:
Cols sit inside rows, and these are the actual element that has media query styling to provide responsiveness:
s12 =在所有屏幕宽度上占用12列(一半的空间)
s12 = take up 12 columns (half the space) at all screen widths
s6 =在所有屏幕宽度上占用6列(一半的空间)
s6 = take up 6 columns (half the space) at all screen widths
m6以平板电脑宽度占用6列(一半的空间)
m6 take up 6 columns (half the space) at tablet width
l6 =以桌面宽度占用6列(一半的空间)
l6 = take up 6 columns (half the space) at desktop width
您可以在cols内嵌套行以提供嵌套的网格，但是很少需要-您可以使用flexbox在cols内进行间距.
You can nest rows inside cols to provide nested grids, but it is very rarely needed - you can use flexbox for spacing inside cols.
结构非常简单但非常具体:
The structure is very simple but very specific:
<div class="container">
<div class="row">
<div class="col">
[content goes here]
</div>
<div class="col">
[content goes here]
</div>
</div>
</div>
我已经在此处构建了一个代码笔库，演示了基础知识，并为每个元素，这样您就可以看到每个元素占用了多少空间.
I have built a codepen here demoing the basics, and added border to each of the element so that you can see how much space each ones takes.
https://materializecss.com/grid.html
这篇关于Materialise Grid s12在移动视图或Chrome开发人员工具中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
