Javascript 如何根据浏览器宽度更改CSS

我知道如何使用css媒体属性根据浏览器宽度选择一个备选css，但是。。如果我必须从众多备选CSS中选择少数几个，该怎么办

假设我的网页上有三个主题，即红色、绿色和蓝色。对于浏览器宽度分别大于1024px和小于1024px的情况，每个浏览器都有两个变体_big和_small。所以我有

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

现在我有三个按钮来切换它们。BtnR，BtnG，BtnB。 当我单击BtnR时，它会根据浏览器宽度切换样式，即如果浏览器宽度大于1024px，则选择的CSS为Red_big.CSS或Red_small.CSS。。。 和。。所以当我点击BtnG或BtnB

---

如何使用javascript实现这一点？谢谢。

将其制作成一个大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>

@仅介质屏幕和（最小宽度：1024px）{
/*您的css屏幕大小为1024像素*/
.green{字体大小：40px}
}
@仅介质屏幕和（最小宽度：640px）{
/*您的css屏幕大小为640像素*/
.green{字体大小：20px}
}

好的，例如尝试响应式css

min-width: 100%

这样，宽度将根据屏幕大小进行调整

---

希望这能有所帮助。

为什么不将小版本放在大版本的媒体查询中？为什么不将大/小版本的css分组到一个文件中，并相应地切换颜色css。像red.css将有大/小两种颜色，所以你需要做的就是切换颜色，css将根据宽度启动