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

Question

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

例如:

A black菜单栏有 width:800px;和 height:50px;但是，通常情况下，如果屏幕低于特定分辨率和/或检测到移动设备，black栏将变为 blue酒吧 width:300px;和 height:150px; .

我猜这与它的工作方式类似:

如果screen <= 300px, use this CSS或者如果 screen > 300px, use this CSS .

帮助将不胜感激。

Answer 1

这就是您要使用媒体查询的目的。您可以在网络上找到许多如何使用它们的示例。只需谷歌“css 媒体查询”，但这里有一组非常基本的查询，可让您了解其工作原理。

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

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