Javascript 如何使用分辨率相关css文件？

我有一个网站，根据分辨率的不同应该有不同的风格。

.

我想在加载文档时检查

窗口.innerWidth

，当宽度小于1024px时使用small.css。否则我想使用large.css

---

有什么想法吗？

通过Javascript代码动态加载所需的CSS文档

编辑：更详细的源代码：

var srcURL;

if(resolution1)
     srcURL = "path/small.css";
else
     srcURL = "path/large.css";

var style = document.createElement("link")
style.setAttribute("rel", "stylesheet")
style.setAttribute("type", "text/css")
style.setAttribute("href", srcURL)

document.getElementByTagName("head")[0].appendChild(style);

---

通过Javascript代码动态加载所需的CSS文档

编辑：更详细的源代码：

var srcURL;

if(resolution1)
     srcURL = "path/small.css";
else
     srcURL = "path/large.css";

var style = document.createElement("link")
style.setAttribute("rel", "stylesheet")
style.setAttribute("type", "text/css")
style.setAttribute("href", srcURL)

document.getElementByTagName("head")[0].appendChild(style);

媒体查询

/* your "big screen" CSS here */
@media all and (max-width:1024px) {
  /* your "small screen" CSS here
}

你也可以反转它，这取决于浏览器不支持媒体查询的情况下你想考虑的“默认”：

/* your "small screen" CSS here */
@media all and (min-width:1024px) {
  /* your "big screen" CSS here
}

媒体查询

/* your "big screen" CSS here */
@media all and (max-width:1024px) {
  /* your "small screen" CSS here
}

你也可以反转它，这取决于浏览器不支持媒体查询的情况下你想考虑的“默认”：

/* your "small screen" CSS here */
@media all and (min-width:1024px) {
  /* your "big screen" CSS here
}

---

谷歌css媒体查询。另请参阅：响应式网页设计谷歌css媒体查询。另请参阅：响应式网页设计是的，这是我的计划。。。答案是如何做到这一点-另一个问题：我做了这个-但是onLoad事件没有启动？！仅仅因为OP要求JavaScript解决方案并不意味着它是合适的选择。这就像你需要一把螺丝刀，却要一把锤子。JavaScript是一把锤子，媒体查询是一把螺丝刀。当然，锤子可以工作，但是螺丝刀是更好的选择。@Paedow，我更新了JS FIDLE:JSFIDLE不识别

function foo（）

在

JavaScript

区域定义方法的方法，尽管你可以在HTML区域，在

Script

标记元素中使用它。是的，这是我的计划。。。答案是如何做到这一点-另一个问题：我做了这个-但是onLoad事件没有启动？！仅仅因为OP要求JavaScript解决方案并不意味着它是合适的选择。这就像你需要一把螺丝刀，却要一把锤子。JavaScript是一把锤子，媒体查询是一把螺丝刀。当然，锤子可以工作，但是螺丝刀是更好的选择。@Paedow，我更新了JS FIDLE:JSFIDLE不识别

function foo（）

在

JavaScript

区域中定义方法的方法，尽管你可以在HTML区域、在

Script

标记元素中使用它。我在哪里进行媒体查询？在标签中？以下是对Kolink答案的补充。使用媒体查询的网站。您只需将其添加到您使用样式的任何css中，最好是在外部样式表中。括号中的任何内容只有在该决议中才受约束。我在哪里进行媒体查询？在标签中？以下是对Kolink答案的补充。使用媒体查询的网站。您只需将其添加到您使用样式的任何css中，最好是在外部样式表中。括号内的任何内容只有在符合该决议时才适用。