Javascript 自动检测移动设备或分辨率并相应调整CSS

我想知道如何根据屏幕的设备或分辨率（或设备和分辨率检测的一个示例）更改菜单栏的CSS设置

例如：

一个

黑色

菜单栏具有

宽度：800px和<代码>高度：50px

正常情况下，如果屏幕分辨率低于某一分辨率和/或检测到移动设备，

黑色

条将变为

蓝色

条，宽度为300px和<代码>高度：150px

我猜这与它的工作原理类似：

如果

屏幕显示300px，请使用此CSS

非常感谢您的帮助。

以下是CSS：

@media screen and (max-width: 300px) {
     #black-bar {
          width: 300px;
          height: 150px;
          background-color: blue;
     }

     /*Additional styles can be added like...
       body {background-color: green;}*/
}

如果您只想在打印页面时以这种方式执行@media打印，也可以执行@media打印；如果您想在所有情况下都执行@media或@media all，也可以只执行@media或@media all

---

有关详细信息，请参阅。

这是您使用媒体查询的目的。你可以在网上找到很多使用它们的例子。只需谷歌“css媒体查询”，但这里有一组真正基本的查询，让您了解它是如何工作的

@media all and (max-width: 300px) {
  .menubar {
      // code for below 300px
  }
}

@media all and (min-width: 301px) {
  .menubar {
     // code for above 301px
  }
}

---

谢谢你的信息。基于我提供的选项（宽度；/高度；/background color；）的示例对我和任何想了解这一点的人都更为有益。没问题。我真的偷了@elclanrs的MDN链接。