如果屏幕低于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" />