javascript - 解像度相対CSSファイルを使用する方法は？

Question

解像度に応じてスタイルを変える必要のあるウェブサイトがあります。

これまでの私のコード。ドキュメントが読み込まれているとき

にを確認し、幅が1024pxよりも小さい場合はsmall.cssを使用します。それ以外の場合は、 large.cssを使用します。window.innerWidth

何か案は？

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);