横幅自动适合移动用户

Question

我有一个设置为居中的横幅 我想做什么如何让它适合移动设备？ 这是我的CSS代码。

#banner{
background: transparent url(banner.jpg) no-repeat;
width: 870px;
height: 300px;
margin-bottom: 20px;
border: 5px solid #fff;}

HTML

<div id="banner"></div>

图片This

帮助？

Answer 1

您需要使用媒体查询。默认情况下，元素将是100％宽度，然后在窗口足够宽时使用媒体查询来设置宽度。

#banner {
  background-color: #f00;
  height: 300px;
  margin-bottom: 20px;
  border: 5px solid #fff;
}
@media (min-width: 870px){
  #banner {
    background-color: #0f0;
    width: 870px;
  }
}

<div id="banner"></div>