0

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

例如：

black菜单栏有 并且width:800px;通常 height:50px;，如果屏幕低于特定分辨率和/或检测到移动设备，则菜单栏black将变为blue带有 width:300px;和 的栏height:150px;。

我猜这与它的工作方式相似：

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

帮助将不胜感激。

4

2 回答 2

1

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

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

@media all and (min-width: 301px) {
  .menubar {
     // code for above 301px
  }
}
于 2013-11-10T02:01:14.567 回答
1

下面是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 print，或者如果您希望它在所有情况下都执行，则只执行@media 或@media all。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。

于 2013-11-10T01:56:34.777 回答