响应式背景标题图片
问题描述:
我正在尝试为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;
}
这将解决我认为的问题。
+0
不会做这项工作,因为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/ 他们解释和刚才的例子, 我一直停留在确切同样的事情,但我有它固定
答
这里是最好的断点(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 */ }
样本篇
和一些文章:
你听说的 - [背景大小(https://developer.mozilla.org/en-US/docs/Web/CSS /背景大小)? – Stickers 2015-04-03 14:27:40
为什么所有这些手工操作,你可以使用像Bootstrap这样的框架来处理所有这些。 – Michelangelo 2015-04-03 15:07:09