Onsen UI 的响应式网格答案

【问题标题】：Responsive grid for Onsen UIOnsen UI 的响应式网格
【发布时间】：2017-09-14 13:39:23
【问题描述】：

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

【问题讨论】：

标签： cordova responsive-design hybrid-mobile-app onsen-ui monaca

【解决方案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；中屏：column1 7/12， column2 5/12，column3 隐藏；小屏：column1 100%，column2 100% 在下一行，隐藏第 3 列。我是对的？

这对于一些媒体查询和一些自定义 CSS 来说没有问题。如果你查看my updated codepen，你会发现我在不同的视口用display:none; 和display:block; 隐藏了col 3。

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

HTML

骨架：响应式 CSS 样板

</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。

祝你狩猎顺利！

【讨论】：

感谢您的回答！但正如我所见 - Skeleton 不可能改变宽度或隐藏一些小屏幕的列？ IE。如果我有 3 个列，则无法创建此屏幕布局：大屏幕：column1 5/12、column2 5/12、column3 2/12；中屏：column1 7/12，column2 5/12，column3 hidden；小屏幕：column1 100%，column2 100% 在下一行，column3 隐藏。我是对的？
嗨@David，感谢您的更新！是的，我知道我们可以将 CSS 用于这些技巧。但是 Bootstrap 网格为这些情况预定义了类（例如：hidden-xs 用于在超小屏幕上隐藏列，col-lg-5 和col-md-7 用于在大屏幕和中屏幕上定义不同的宽度等）。我的梦想 - 找到具有 Bootstrap 功能的轻量级 CSS 网格 :)