Отзывчивый заголовок фона

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