Question

我正在尝试建立一个物化css的网站，该网站对我朋友正在制作的产品完全响应。我有一个适用于移动和桌面的布局，但我不知道如何在页面达到一定大小时让它们移动列。移动代码只是全部col s12，但在桌面版本上，它更加分散。任何帮助或意见将不胜感激。

再次感谢，乐观。

Answer 1

我认为你应该为每个屏幕尺寸设计不同的页面。 Materialise CSS使您有机会使用不同的类来处理不同的屏幕尺寸。

通过定义 <div class = "col s12">表示每个屏幕尺寸使用12列。我认为你要找的是<div class = "col s12 m8 l4">

您可以从下面的参考资料中获取有关网格系统的详细信息：

http://materializecss.com/grid.html

此外，您可能还想检查引导程序。它在Visual Studio 2013中非常容易使用。

如果你有足够的时间（一天左右），MVA会有一个有用的培训解释网格系统，使用Bootstrap的响应式网页设计是完全免费的。你可以在：

找到它

Building responsive UI with using Bootstrap

希望这有助于你

Cagri

Answer 2

如果我理解正确，您需要为不同的平台制作不同的视图。

最好由CSS中的@media（）{}进行，该问题适用于此问题＆gt;

此处有更多信息：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

您可以在短时间内为所需的宽度定义@media，并为列提供不同的属性。

示例：

@media (max-width: 768px;) {

#columns {
    display: block;
    width: 100%;
}
}

@media (min-width: 768px;) {

#columns {
   display: inline-block;
   width: 50%;
}

}

将在平板电脑和桌面上将您的列彼此相邻，并在移动平台上彼此相邻。

否则，Bootstrap是一个很好的选择。如何做到这一点。

希望它有所帮助。

Answer 3

您应该参考他们的文档（http://materializecss.com/grid.html）

基本上，有三种主要设置：网格中的小（s），中（m）和大（l）。您也可以选择隐藏不同屏幕尺寸的内容。

为浏览器的宽度实现CSS不同的列样式？

3 个答案: