如何使用Css減小寬度屏幕的寬度？

Question

它可以調整div的寬度，因爲瀏覽器的寬度屬性正在減少或增加使用純Css？

我的意思是，如果我有一個解決這樣一個元素：

div { 
    width: 20%; 
} 

然後，我想增加1％的股利爲每個我寬度減小瀏覽器10px的寬度，這是可能的只使用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

這也可以幫助你結合使用下面的代碼和calc（）在CSS中的幫助。

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

讓我們試試看你的代碼。