如何根據瀏覽器寬度更改CSS

-3

我知道如何根據瀏覽器寬度與CSS媒體屬性選擇替代CSS之一，但是..如果我必須選擇多個替代CSS中的幾個...？如何根據瀏覽器寬度更改CSS

假設我的網頁上有三個主題，即Red Green和Blue。它們中的每一個都有兩個變體_big和_small，分別用於瀏覽器寬度大於1024像素和小於1024像素。所以，我有

Red_big.css
Red_small.css
Green_big.css
Green_small.css
Blue_big.css
Blue_small.css

現在我有三個按鈕來切換它們。 BtnR，BtnG，BtnB。當我點擊BtnR時，它根據瀏覽器寬度切換樣式，即如果瀏覽器寬度是grewater比1024px，那麼CSS選擇是Red_big.css else Red_small.css ... 和..等等當我點擊BtnG或BtnB ...

如何用JavaScript做到這一點？謝謝。

來源

2014-01-06 swapna

爲什麼不把小版本放在大的媒體查詢中？ – Goombah

爲什麼你不把大/小的CSS分組到1文件，並相應地切換顏色的CSS。像red.css一樣會有大/小，所以你需要做的就是切換顏色，並且CSS將根據寬度 – Huangism

使一個大的CSS文件，並使用響應裏面：

<style type="text/css"> 
@media only screen and (min-width: 1024px) { 
    /* your css of 1024 px screen size */ 
    .green {font-size:40px} 
} 

@media only screen and (min-width: 640px) { 
    /* your css of 640 px screen size */ 
    .green {font-size:20px} 
} 
</style>

來源

2014-01-06 21:50:36

好的嘗試響應CSS例如

min-width: 100%

這樣的寬度將與什麼都在屏幕尺寸可能調整希望這可以幫助。

來源

2014-01-06 23:20:53 Beep

如何根據瀏覽器寬度更改CSS

回答

相關問題