Question

如果页面调整得太小，或者如果页面调整得太小，我会调整一些JavaScript/JQuery代码，以便webpage切换CSS scripts它开始太小了。

调整大小似乎很有效，但我想我可能会在window.onload语句上作弊，以便进行大小调整检查。当我开始加载页面并看到它必须＆＃34;思考＆＃34;在切换到narrow.css。

之前

我正在寻找有关如何更好地预处理这些代码的建议，或者在mobile连接上减少负担。

＆＃13;

"use strict";

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();

  if (windowsize < 600) {
    document.getElementById("myCSS").setAttribute("href", "css/narrow.css");
  } else {
    document.getElementById("myCSS").setAttribute("href", "css/mystyles.css");
  }
});

//force window size check at load to kick in if statement
window.onload = $(window).resize();

＆＃13;

Answer 1

css媒体查询专为此目的而设计：Parsing JSON from URL

要将此方法应用于示例中的详细信息，您可以执行以下操作：

@media (max-width: 600px) {
  /*CSS from css/narrow.css*/
}
@media (min-width: 601px) {
  /*CSS from css/mystyles.css*/
}

Answer 2

最好将#myCSS最初设置为移动样式表，如果屏幕太大，请切换到桌面样式表。
无需等待load事件执行;如果JS片段在#myCSS之后，则#myCSS已经在DOM中，并且可以在没有$(window).resize();的情况下编写window.onload =。这应该可以防止浏览器在加载样式表之前等待其他所有内容加载。

寻找更好的JavaScript / CSS开关

2 个答案: