隨着屏幕大小的變化連續調整元素大小

Question

有沒有辦法使用媒體查詢逐漸改變CSS屬性的值，因爲屏幕會改變大小（連續/平滑）。而不是設置一系列有變化的斷點（step-ly）？

喜歡本網站：http://www.bluegoji.com/？ 頁面頂部（導航欄）<ul>中<a>標籤的邊距會隨着縮小瀏覽器窗口而不斷減小。

這是我試圖實現的行爲。

或者只是使用這麼多的媒體查詢，它似乎改變順利的解決方案??

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

你給的例子使用Flexbox的是這樣的：

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>