Css 响应背景标题图像

我正在尝试为ipad和智能手机创建一个单独的移动站点。到目前为止，一切都很顺利，但尽管我尽了最大努力，我还是无法获得正确的标题图像。我希望它能够响应手机和平板电脑的要求，而不是桌面。请帮我解决这个问题。这是CSS中的代码

    #headBanner {
background: url("header.jpg")
background-repeat:no-repeat;
    background-position: top center;
    background-size: 100%;
}  

#headBanner a, #headBanner a:visited {

color: #000000;

padding: 12px 0 0 8px;

font-size: 2.2em;

}

这是标题部分的html代码

<div id="headBanner"><a href="example.com">Site Name</a></div>

请帮帮我。我完全沮丧。我应该使用什么代码，我应该为标题图像设置什么大小？我用的是320像素乘以80像素

#headbanner{
              width: 100%;
              height: auto;
              background-size: 100% auto !important;
}

我认为这将解决这个问题

@media screen and(max-width: 320px) {
    #headBanner {
        background: url("header.jpg")
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }
}

您必须使用此功能，但请记住，Retina Apple产品的屏幕内容确实有特定的分辨率/像素比

你可以看看这里： 他们解释并举例说明，

---

我一直在做同样的事情，但我已经把它修好了

这是一个最好的断点示例

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

以及一些文章：

---

你有没有听说过-？为什么要手工操作，你可以使用像Bootstrap这样的框架来处理所有这些。正如OP提到的那样，我不会这么做：我正在尝试为ipad和智能手机创建一个单独的移动站点。