画面サイズの変更に応じて要素サイズを継続的に調整する

Question

メディアクエリを使用して、画面がサイズを変更するにつれて徐々にCSSプロパティの値を変更する方法はありますか。変化があるブレークポイントを設定するのではなく（ステップリ）？

このサイトのように：http://www.bluegoji.com/？ のタグの余白は、ブラウザウィンドウの幅を狭くするにつれて、ページ（ナビバー）の上部にある<ul>のタグの余白が連続的に減少します。

これは私が達成しようとしている動作です。

また、多くのメディアクエリを使用してスムーズに変化するようなソリューションですか？

Answer 1

多くのメディアクエリを使用する方法があります。しかし、それは最善の方法ではないかもしれません。

ビューポートパーセンテージ単位を使用することを検討してください。スペックから

：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

ビューポートのパーセンテージ長は 初期包含ブロックのサイズに対するものです。ブロックを含む最初の の高さまたは幅が変更されると、それに応じて拡大/縮小されます。

• VW部 - 初期包含ブロックの幅の1％に等しいです。
• vhユニット - ブロックの最初の高さの1％に等しい。 ブロック。
• vmin単位 - vwまたはvhの小さい方と等しい。
• vmaxユニット - vwまたはvhの大きい方と同等です。あなたが探しているものを

DEMO

Answer 2

メディアクエリではありません。 幅、余白、およびパディングをパーセンテージで設定できます。それがこれを行う通常の方法です。ここで

は一例です：

HTML

<div> 
    <a>Link</a> 
    <a>Link</a> 
    <a>Link</a> 
    <a>Link</a> 
</div> 

CSS

a { 
    width:25%; 
    display:block; 
    float:left; 
} 

Answer 3

あなたが与えた例は次のようにフレキシボックスを使用しています。

ul { 
 
    margin: 0; 
 
    padding:0; 
 
} 
 
li { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
    outline: 1px solid silver; 
 
} 
 

 
@media screen and (min-width: 500px){ 
 
    ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    } 
 
    li { 
 
    flex-grow: 1; 
 
    } 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>