Question

我正在尝试为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像素。

Answer 1

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

这将解决我认为的问题。

Answer 2

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

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

你可以看看这里：http://stephen.io/mediaqueries/ 他们解释并举例说明我一直坚持同样的事情，但我已经修好了

Answer 3

以下是最佳断点（imo）的示例

@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 */ }

和一些文章：

http://stephen.io/mediaqueries/

http://webdesignerwall.com/tutorials/css3-media-queries

响应背景标题图像

3 个答案: