Materialisecss框架中行的响应性

Question

我在Materialisecss中构建了一个简单的单页组合。浏览器看起来不错，但是当我减小chrome的大小时，它在移动设备上看起来很差。  它在Browser中看起来像这样。但是我需要在this way中使用文本对齐和管理进行重新定位。

Answer 1

您可以将列大小类用于小型/中型/大型设备（http://materializecss.com/grid.html），并将其与hide-on-classes结合使用，以实现您想要的效果（http://materializecss.com/helpers.html）。

请记住，您需要将元素放在行div中。

Answer 2

<div class="row"> <div class="grid-example col m6 s12">I'm a web designer</div> <div class="grid-example col m6 s12">I'm a web developer</div> </div>

以上代码（基于materialize.css）将覆盖任何大于600px的设备的宽度的一半，在较小的设备中，它将覆盖整个宽度。

访问此链接以获取更多info