响应式背景标题图片

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

来源

2015-04-03 Mayank Gupta

你听说的 - [背景大小（https://developer.mozilla.org/en-US/docs/Web/CSS /背景大小）？ – Stickers 2015-04-03 14:27:40

为什么所有这些手工操作，你可以使用像Bootstrap这样的框架来处理所有这些。 – Michelangelo 2015-04-03 15:07:09

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

这将解决我认为的问题。

来源

2015-04-03 14:29:42 Kaleem

不会做这项工作，因为OP提到： “我正在尝试为ipad和智能手机创建一个单独的移动网站。” – 2015-04-03 14:44:16

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

你将不得不使用此功能，但请记住，视网膜（苹果产品屏幕的东西）确实有一个特定的分辨率/像素比

你可以到这里看看：http://stephen.io/mediaqueries/ 他们解释和刚才的例子，我一直停留在确切同样的事情，但我有它固定

来源

2015-04-03 14:36:46

这里是最好的断点（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

来源

2015-04-03 15:09:25

响应式背景标题图片

回答

相关问题