如何使用分辨率相对CSS文件

Question

我有一个网站，该网站应取决于分辨率。


到目前为止，我的代码。

我想检查window.innerWidth，因为我的文档正在加载并使用 small.css 当宽度小于 1024px 时。否则，我想使用 grong.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);