CSSの@メディアのような規則はDIVのコンテンツ

Question

のフォーマットのために私は、動的に適応することができます/再フォーマットのdivの内容をサイズ（JavaScriptが無効になっている場合でも）のいずれかの変化にCSSルールを必要とします。出来ますか？

同様：

@media (min-width:600px) { div .content { column-count: 2; }} 
@media (min-width:900px) { div .content { column-count: 3; }} 
... 

か何かが、DIV用とJSなし。

私が代わりにビューポート/画面のサイズのDIVのサイズに依存CSSルールを、必要な...多分@mediaルールを好きですが、何かがdivのコンテンツの書式を変更しません。

Answer 1

ない、これはあなたが探しているものであるかどうかわからなく、いくつかのdivをフロートし、特定のサイズで彼らの親コンテナを小さくする

HTMLメディアクエリを作成します。

<div class="container"> 
    <div class="box" id="box1"></div> 
    <div class="box" id="box2"></div> 
    <div class="box" id="box3"></div> 
    <div class="box" id="box4"></div> 
</div> 

をCSS：

.container { 
    width: 100%; 
} 

.box { 
    height: 100px; 
    width: 100px; 
    float: left; 
    margin: 2px; 
} 

#box1 { 
    background-color: red; 
} 

#box2 { 
    background-color: blue; 
} 

#box3 { 
    background-color: green; 
} 

#box4 { 
    background-color: purple; 
} 

@media (max-width: 960px) { 
    .container { 
    width: 50%; 
    } 
} 

見る（ウィンドウのサイズを変更）：https://codepen.io/anon/pen/qrZRpZ