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

Question

我知道如何根据浏览器宽度选择css media属性中的替代css之一但是..如果我必须选择很多替代CSS中的一些......？

假设我的网页上有三个主题，即Red Green和Blue。它们中的每一个都有两个变量_big和_small，浏览器宽度分别大于1024px和低于1024px。所以我有

• 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，否则Red_small.css ... 和...等我点击BtnG或BtnB ......

如何用javascript做到这一点？感谢。

Answer 1

制作一个大的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>

Answer 2

好的尝试响应css例如

min-width: 100%

这样，宽度将根据屏幕尺寸调整 希望这有帮助。