jquery - 如果屏幕低于 800 运行这个 CSS，否则运行这个 CSS

Question

我想知道我是否可以以某种方式创建一个 if 语句，如果屏幕低于 800，它运行 mobile.css 否则运行另一个 CSS 文件。

我的想法是创建这样的东西:

if (screen.width <= 800) {
  run.this.css = "<link rel="stylesheet" type="text/css" href="mobile.css" />";
}
else {
  run.this.css = "<link rel="stylesheet" type="text/css" href="desktop.css" />";
}

Answer 1

只需使用 1 个 CSS 文件并使用媒体查询来覆盖:

/* DESKTOP.CSS CODE HERE */

@media screen and (max-device-width: 800px) {
    /* MOBILE.CSS CODE HERE */
}

如果你真的想要它们在单独的 CSS 文件中，你可以执行以下操作:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="mobile.css" />