Question

不幸的是，温泉UI没有响应式网格，可以在各种尺寸的屏幕上放置块。您可以推荐哪些网格用于Onsen UI？我有使用Bootstrap的经验，但是这个库太大了，不能仅在响应网格的项目中使用它。我已经探索了其他一些网格，但与Bootstrap不同，它们无法在小屏幕上隐藏某些块或更改它们的顺序（只需要堆叠而不是一行）。有没有人对Onsen UI的响应式网格有积极的体验？

Answer 1

Skeleton是一个非常轻量级的网格，可以满足您的需求。

开箱即用，他们的网格系统在移动设备上折叠为单个列，它具有有限数量的辅助类和I found this source，如果您需要更多地控制列的排序，它会列出大量的推送和拉动混合。你可以选择你需要的那个。例如

/* Push & Pull */
    .container .push-by-one                   { left: 60px;  }

我根据您可以玩的Skeleton网站上的一些代码启动了一个codepen：https://codepen.io/panchroma/pen/JNXoVP

<强>更新

如果我有3个列我无法创建此屏幕布局：大屏幕：第1栏5/12，第2栏5/12，第3栏2/12;中画面：第1栏7/12， column2 5/12，column3 hidden;小屏幕：column1 100％，column2 100％在下一行，column3隐藏。我没错？

对于某些媒体查询和一些自定义CSS，这没有问题。如果您结帐my updated codepen，我会在不同的视口中看到我在display:none;和display:block;上隐藏第3列。

要更改第1列的宽度，我使用了Skeleton CSS并使用了7/12网格的规则来覆盖5/12网格的宽度

<强> HTML

Skeleton：响应式CSS Boilerplate

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

    <div class="container">

  <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="five columns overide"><h5>Column 1</h5>5/12 large screen, 7/12 med screen, 100% small</div>
    <div class="five columns"><h5>Column 2</h5>5/12 large & medium screens, 100% small</div>
    <div class="two columns hidden-md"><h5>Column 3</h5>2/12 large screen, hidden medium and small screens</div>

  </div>
</div> <!-- end container-->



<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

<强> CSS

/* Mobile first queries */
 .hidden-md{
   display:none;
 }

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* Custom helper class */

@media (min-width: 750px) {
  .hidden-md{
      display:block;
    }
}

/* Custom Grid Width */
@media (min-width: 550px) and (max-width: 749px) {
  .five.columns.overide{
     width: 56.6666666667%; 
  }

}

另一次更新

我的梦想 - 找到具有Bootstrap功能的轻量级CSS网格：）

对于最小文件大小，可能很难匹配Skeleton +一些手动CSS。

我能想到的另一个选择是创建一个常规的Bootstrap站点，然后通过UnCSS运行它。

我已经使用基于Bootstrap的网站完成了几次这样的操作。我在动态CMS站点上取得了不同的成功，在不太复杂的静态站点上取得了很好的效果，并且CSS文件大小减少了80-90％。

有许多方法可以使用UnCSS。我在Grunt和Node中使用了这个Github code。我看到还有an online resource。

祝你好运！

Onsen UI

1 个答案: