自动检测移动设备或分辨率，并相应地调整CSS [英] Auto Detect Mobile Device or Resolution and Adjust CSS accordingly

问题描述

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

例如：

A code>菜单栏有 width：800px; 和 height：50px; 如果检测到某个分辨率和/或移动设备，则 black 栏将改变为蓝色 width：300px; 和 height：150px; 。

我猜这是很模糊的工作方式：

如果屏幕<使用此CSS 或如果屏幕> 300px，请使用此CSS 。

帮助会感激。

解决方案

这是您将使用媒体查询。您可以找到如何在整个网络中使用它们的多个示例。只是Googlecss媒体查询，但这里是一个真正基本的查询，让你的工作原理。

  @media all and（max-width：300px）{
 .menubar {
 // code for below 300px 
} 
} 
 
 @media all和（min-width：301px）{
 .menubar {
 //代码以上301px 
} 
} 
  pre> 
I would like to know how I would change the CSS settings of a menu bar according to the device or resolution of the screen (or one example of both device and resolution detection). 

For Example:

A black menu bar has  width:800px; and  height:50px; normally, however, if the screen is bellow a certain resolution and/or a mobile device is detected, the black bar will change to a blue bar with  width:300px; and  height:150px;.

I'm guessing this is simular to how it would work: 

If the screen <= 300px, use this CSS or if the screen > 300px, use this CSS.

Help will be appreciated.
解决方案
This is what you would use Media Queries for. You can find MANY examples of how to use them throughout the web. Just Google "css media queries", but here is a really basic set of queries to give you an idea of how it works.
@media all and (max-width: 300px) {
  .menubar {
      // code for below 300px
  }
}

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


                        
这篇关于自动检测移动设备或分辨率，并相应地调整CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！