Question

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

例如：

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 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。

Answer 2

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

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

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

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

2 个答案: