Cssを使用して幅の画面が小さくなるとdivの幅を広げる方法はありますか？

Question

純粋なCSSを使用してブラウザの幅プロパティが減少または増加しているので、divの幅を調整することは可能ですか？私が意味する

、私は解像度で、このような要素がある場合：次に

div { 
    width: 20%; 
} 

を、私は1％私は幅ブラウザを減らすすべての10pxのためのdivの幅を増やしたい、それが可能ですちょうどCss3を使用して？

Answer 1

CSSでウィンドウを小さくするほど幅が小さくなります。 ウィンドウが減少しているので、の幅を増やすことはできません。

その可能な唯一のソリューションのCSSを使用するが、それは@mediaクエリの野生の量が必要になります：

JS Fiddle (using larger percentage for example)

@media only screen and (max-width: 400px) { 
    div { 
     width: 20%; 
    } 
} 

@media only screen and (max-width: 390px) { 
    div { 
     width: 21%; 
    } 
} 

@media only screen and (max-width: 380px) { 
    div { 
     width: 22%; 
    } 
} 

などを...

CSSはありません。ビューポートの幅を計算し、それに基づいてスタイルを適用するためのロジックが組み込まれており、手動でメディアクエリを実行する必要はありません。間違いなくjsソリューションが推奨されるでしょう。

Answer 2

これはまた、次のコードを組み合わせてCSSのcalc（）を使用すると役立ちます。

vw, vh 
1vw = 1% of viewport width 
1vh = 1% of viewport height 

コードで試してみましょう。