旗帜自动适合移动用户

问题描述：

我有一个旗帜设置为中心我想做什么它如何使它自动适合移动？这是我的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

帮助？

，具有明显的语法错误。缺少'''。为了适应移动设备，您应该使用媒体查询。 – Raptor

忘了把它..如何呢？如何使用媒体查询？ –

媒体查询：https：//www.w3schools.com/css/css_rwd_mediaqueries.asp –

答

你会想要使用媒体查询。默认情况下，该元素将是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>

我试过了，但它没有工作.. –

忘记把元视口？此外，如果您使用媒体查询，则使用固定宽度的情况非常罕见。改用宽度百分比或'vw'。 – Raptor

我已经输入了它..我不知道为什么..：/ –

旗帜自动适合移动用户

相关推荐