javascript - 如何使用分辨率相关的css文件？

Question

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

到目前为止我的代码。

我想在window.innerWidth我的文档加载时检查并在宽度小于1024px时使用small.css。否则我想使用large.css。

有任何想法吗？

Answer 1

媒体查询。

/* 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
}

Answer 2

通过您的 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);