響應網格爲溫泉用戶界面

不幸的是，溫泉用戶界面沒有一個響應網格用於在各種大小的屏幕上放置塊。你可以推薦哪些網格用於Onsen UI？我有使用Bootstrap的經驗，但是這個庫太大而不能用於響應式網格的項目。我已經探索了一些其他網格，但與Bootstrap不同，它們不能隱藏小屏幕上的某些塊或更改它們的順序（只需製作一個堆棧而不是一行）。有沒有人對Onsen UI的響應式網格有積極的體驗？響應網格爲溫泉用戶界面

來源

2017-04-18 Sergey Konov

Skeleton是一個完善的非常輕量級的網格，可能適合您的需求。

開箱後，他們的網格系統崩潰到移動設備上的一個列，它有助手類的數量有限，如果您需要更多的控制列的排序，它列出大量的推拉混合。你大概可以挑選你所需要的。例如

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

我開始基於從骨架網站一些代碼，你可以玩一個codepen：如果我有3個colums我無法創建https://codepen.io/panchroma/pen/JNXoVP

更新

此屏幕布局：大屏幕：第1欄5/12，第2欄5/12，第3欄第2/12頁;中畫面：column1 7/12， column2 5/12，column3 hidden;小屏幕：column1 100％，column2 100％下一行，column3隱藏。我是對的？

這對一些媒體查詢和一些自定義CSS沒有任何問題。如果您退房my updated codepen，您會看到我在不同的視口中隱藏了第3列的display:none;和display:block;。

要改變塔1的寬度I inpspected骨架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%; 
    } 

}

另一個更新

我的夢想 - 找到與引導功能 :)

對於最小文件大小輕量級的CSS網格可能是難以企及的骷髏+手工的一些滾動的CSS。

我能想到的另一個選項是創建一個常規的Bootstrap站點，然後通過UnCSS運行它。

我已經使用基於Bootstrap的網站完成了少數幾次。我在動態CMS網站上取得了成功，在不太複雜的靜態網站上取得了非常好的效果，並且CSS文件大小減少了80-90％。

有許多方法可以使用UnCSS。我用Grunt和Node使用這個Github code。我看到也有an online resource。

祝你好運！

來源

2017-04-20 01:52:30

感謝您的回答！但正如我所看到的 - Skeleton不可能改變寬度或隱藏小屏幕的某些列？也就是說如果我有3列，我無法創建此屏幕布局：大屏幕：列1 5/12，列2 5/12，列3 2/12; 中畫面：column1 7/12，column2 5/12，column3隱藏; 小屏幕：column1 100％，column2 100％在下一行，column3隱藏。我是正確的？ –

您好@SergeyKonov，請參閱我的更新 –

以上Hi @David，謝謝您的更新！是的，我知道我們可以使用這些技巧的CSS。但Bootstrap網格爲這些情況提供了預定義的類（例如：用於在非常小的屏幕上隱藏列的'hidden-xs'，用於在大中屏幕上定義不同寬度的'col-lg-5'和'col-md-7'等等。）。我的夢想 - 找到具有Bootstrap功能的輕量級CSS網格:) –

響應網格爲溫泉用戶界面

回答

相關問題