我想要使​​用jquery动态更改样式表

Question

<link href="style1" rel="stylesheet" type="text/css" id="dynamic_css" />

如果窗口高于950px

，我想将上面的样式表更改为style1.css

我尝试了下面的代码。

$("#dynamic_css").before( "<link rel="stylesheet" href="style2.css")

Answer 1

不确定jQuery与此有什么关系，因为你已经用CSS标记了它我认为CSS解决方案不会受到伤害。

您需要围绕要以不同分辨率显示的样式包装媒体查询：

.class { color: #green; }

@media (min-width: 400px) and (max-width: 500px) {

    .class { color: #red; }

}

因此.class中的任何内容都将显示为绿色，如果浏览器窗口介于400和500像素之间，则它将显示为红色。

您不需要指定最小和最大宽度，只需指定其中一个，即

@media (min-width: 768px) {
    // styles in here
}

..将在浏览器窗口为768px宽或更宽时生效，并且..

@media (max-width: 399px) {
    // styles in here
}

...当浏览器窗口宽度为399px或更低时生效。