Onsen UI 的响应式网格
Posted
技术标签:
【中文标题】Onsen UI 的响应式网格【英文标题】：Responsive grid for Onsen UI 【发布时间】：2017-09-14 13:39:23 【问题描述】：不幸的是，Onsen UI 没有用于在各种尺寸的屏幕上放置块的响应式网格。您可以推荐哪些网格与 Onsen UI 一起使用？我有使用 Bootstrap 的经验，但是这个库太大，无法在项目中仅用于响应式网格。我探索了其他一些网格，但与 Bootstrap 不同的是，它们不能在小屏幕上隐藏某些块或更改它们的顺序（只需堆叠而不是一行）。有人对 有积极的体验吗？
【问题讨论】：
【参考方案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 网格 :)以上是关于Onsen UI 的响应式网格的主要内容，如果未能解决你的问题，请参考以下文章
SAP UI5 Form 表单的 Responsive Grid Layout 布局中的 breakpoint
SAP UI5 SimpleForm M 和 L 型表单的 label 和 input 分配讲解
有哪些值得推荐的类似 jQuery UI 或者 Bootstrap 这样的 UI 框架