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

Auto Detect Mobile Device or Resolution and Adjust CSS accordingly

本文关键字：调整 CSS 分辨率 移动 自动检测      更新时间：2023-09-26

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

例如：

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

我猜这是它的工作方式的模拟：

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

帮助将不胜感激。

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

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

以下是 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。

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

相关文章：