如何让这个 Materialise 表在移动设备上响应更快
Posted
技术标签:
【中文标题】如何让这个 Materialise 表在移动设备上响应更快【英文标题】：How do I make this Materialize table more responsive on mobile devices 【发布时间】：2020-11-21 14:03:50 【问题描述】：我使用 Materialize 框架创建了一个包含李克特量表答案选项的表格，我发现很难让它在移动设备屏幕宽度上减小其大小。它非常适合，直到宽度低于 466 像素。
我希望桌子出现在移动设备上时可以放在卡片上，但它不起作用。我试图抵消它，激活滚动条，并在 320px 的媒体宽度处减小表格的宽度，但都不起作用。
这是一个JSFiddle 链接。
代码：
body
background-color : wheat;
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-content hoverable black-text">
<ol start="10">
<div class="row">
<b>Behaviour</b><br />
<div class="input-field col s12">
<li>
<p>
To what extent do you agree with the following?
(1=strongly agree, 2=agree 3= Neutral, 4= disagree
5=strongly disagree)
</p>
<br />
<p class="mini">
<b>Various Moods</b>
</p>
<p class="mini">Mark only one oval per row.</p>
<table>
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding-right:20px">
I am calm
</td>
<td>
<label><input class="with-gap" value="Strongly agree" name="grps1" type="radio"/>
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Agree" name="grps1" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Neutral" name="grps1" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Disagree" name="grps1" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Strongly disagree" name="grps1"type="radio" />
<span></span></label>
</td>
</tr>
<tr>
<td style="padding-right:20px">
I am impatient
</td>
<td>
<label><input class="with-gap" value="Strongly agree" name="grps2" type="radio"/>
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Agree" name="grps2" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Neutral" name="grps2" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Disagree" name="grps2" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Strongly disagree" name="grps2" type="radio"/>
<span></span></label>
</td>
</tr>
<tr>
<td style="padding-right:20px">
I don't feel
</td>
<td>
<label><input class="with-gap" value="Strongly agree" name="grps3" type="radio"/>
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Agree" name="grps3" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Neutral" name="grps3" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Disagree" name="grps3" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Strongly disagree" name="grps3" type="radio"/>
<span></span></label>
</td>
</tr>
</tbody>
</table>
</li>
</div>
</div>
</ol>
<div>
</div>
</body>【问题讨论】：
您好 Alberta，如果您想让您的页面具有响应性，使用<table> 通常是一个糟糕的选择。尝试使用 Flexbox 布局 或 CSS 网格，因为它们更灵活，非常适合响应式设计。
@RenevanderLende 谢谢。我使用了 flexbox 方法，效果很好
酷，很高兴能帮上忙！
【参考方案1】：
我能够通过使用 Materialize 网格方法来解决这个问题。 这是指向它的JSFiddle 链接。
```
body
background-color : wheat;
``````
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-content hoverable black-text">
<ol start="10">
<div class="row">
<b>Behaviour</b><br />
<div class="input-field col s12">
<li>
<p>
To what extent do you agree with the following?
(1=strongly agree, 2=agree 3= Neutral, 4= disagree
5=strongly disagree)
</p>
<br />
<p class="mini">
<b>Various Moods</b>
</p>
<p class="mini">Mark only one oval per row.</p>
<div class="row">
<div class="col s5"></div>
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
</div>
<div class="row">
<div class="col s5">I am calm</div>
<div class="col s1"><label><input class="with-gap" value="Strongly agree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Agree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"> <label><input class="with-gap" value="Neutral" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Disagree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Strongly disagree" name="grps1" type="radio" />
<span></span></label></div>
</div>
<div class="row">
<div class="col s5"> I am impatient</div>
<div class="col s1"><label><input class="with-gap" value="Strongly agree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Agree" name="grps2" type="radio" />
<span></span></label></div>
<div class="col s1"> <label><input class="with-gap" value="Neutral" name="grps2" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Disagree" name="grps2" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Strongly disagree" name="grps2" type="radio" />
<span></span></label></div>
</div>
<div class="row">
<div class="col s5"> I don't feel</div>
<div class="col s1"><label><input class="with-gap" value="Strongly agree" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Agree" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"> <label><input class="with-gap" value="Neutral" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Disagree" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Strongly disagree" name="grps3" type="radio" />
<span></span></label></div>
</div>
</li>
</div>
</div>
</ol>
<div>
</div>
<body>【讨论】：
以上是关于如何让这个 Materialise 表在移动设备上响应更快的主要内容，如果未能解决你的问题，请参考以下文章
Materialise Sidenav 不适用于 iOS 或 iPhone，但适用于所有其他设备