オンセンUIのレスポンスグリッド

残念ながら、Onsen UIにはさまざまなサイズの画面にブロックを配置するレスポンスグリッドがありません。あなたはOnsen UIで使用するためにどのようなグリッドを推奨できますか？私はBootstrapの経験がありますが、このライブラリは大きすぎて応答性の高いグリッドのプロジェクトでは使用できません。私はいくつかの他のグリッドを調べましたが、ブートストラップとは異なり、小さな画面でブロックを隠したり、順序を変更したりすることはできません。温泉のUIのための反応的なグリッドで肯定的な経験を持っている人はいますか？オンセンUIのレスポンスグリッド

出典

2017-04-18 Sergey Konov

Skeletonは、あなたのニーズに合った非常に確立された非常に軽量のグリッドです。

デフォルトでは、グリッドシステムはモバイル上の単一の列に折りたたまれます。列の順序を詳細に制御する必要がある場合は、ヘルパークラスの数が限られており、I found this sourceが多数含まれています。おそらくあなたが必要とするものだけを選択して選ぶことができます。例えば

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

私はあなたと遊ぶことができるスケルトンサイトからいくつかのコードに基づいてcodepen開始：https://codepen.io/panchroma/pen/JNXoVP

を更新

私は、私が作成することはできません3つのcolumsを持っている場合この画面レイアウト：大画面：カラム1 5/12、カラム2 5/12、カラム3 2/12;中画面：column1 7/12、 column2 5/12、column3 hidden;小さな画面：列1 100％、列2 100％次の行に、列3は表示されません。私は正しい？

これは、一部のメディアクエリやカスタムCSSでは問題ありません。 my updated codepenをチェックすると、異なるビューポートでdisplay:none;とdisplay:block;とcol 3を隠していることがわかります。私はスケルトンCSSをinpspectedと5/12グリッド

HTML

のための幅をオーバライドする7/12グリッドのためにそのルールを使用している列1の幅を変更するには

スケルトン：応答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 and Nodeを使ってこのGithub codeを使用しました。私はまたan online resourceがあることがわかります。

あなたの狩りで幸運！

出典

2017-04-20 01:52:30

ありがとうございます！しかし、私が見ているように、スケルトンでは、小さな画面の幅を変更したり、一部の列を非表示にすることは不可能です。 I.私は3つの列がある場合、私はこの画面レイアウトを作成することはできません：大画面：column1 5/12、column2 5/12、column3 2/12; 中画面：column1 7/12、column2 5/12、column3 hidden; 小画面：列1 100％、列2 100％が次の行に、列3が非表示になっています。私は正しいですか？ –

こんにちは@SergeyKonov、上記の私の更新を参照してください –

こんにちは@David、更新のおかげで！はい、私はこれらのトリックにCSSを使用できることを知っています。しかし、ブートストラップグリッドには、これらの場合にあらかじめ定義されたクラスがあります（例：大画面と中画面の異なる幅を定義するために、超小型画面の非表示列の 'hidden-xs'、' col-lg-5'と 'col-md-7'）等。）。私の夢 - ブートストラップ機能を備えた軽量CSSグリッドを見つける方法:) –

オンセンUIのレスポンスグリッド

答えて

関連する問題