Как сделать автоматическое положение окна поиска и автоматическое изменение размера независимо от разрешения экрана?

Question

Я создаю отзывчивый сайт для своего проекта, но я застрял с абсолютной позицией моей панели поиска на главной странице, что очень важно для меня.

Вот код:

<div class="span4"> 

<form class="well form-search" 

style="position:fixed; display:block; 

left: 50%; top: 35.5%; 

margin-top: -12.5px; 

margin-left: -150px;" 

action="{$GLOBALS.site_url}/search-results/"> 

<input type="text" class="input-medium search-query" value="I am Searching For" 

style="width: 300px; height: 25px; "> 

<button class="btn btn-large btn-primary" type="submit" > GO </button> 

</form> 

</div> 

</div> 

У меня есть поиск много, видели примеры, но, чтобы сделать его отзывчивым, затем изменил свою позицию от пикселя к проценту, но по-прежнему существует проблема.

На рабочем столе это выглядит прекрасно, но проблема в том, что когда я вижу это на мобильных телефонах или ipads, размещение окна поиска не изменяется. Я просто хочу исправить положение коробки независимо от разрешения экрана на разных размерах экрана.

---

Я изменил код и он работает немного мельче, кроме кнопки Кнопка Go здесь ломает линию и идти вниз. Я хочу, чтобы это было в той же строке. Пожалуйста, проверьте код:

<form class="well form-search" 
style="position:absolute; display:block; 

left: 47.7%; top: 29.5%; 
margin-top: -12.5px; 
margin-left: -22.5%; 


width: -webkit-calc(47.7% - 10px); 
width: -moz-calc(47.7% - 10px); 
width: calc(47.7% - 10px);" 


action="{$GLOBALS.site_url}/search-results-jobs/"> 
<input type="text" class="input-medium search-query"    
value=" I am Looking For" 

style="width: 100%; height: 25px; 

width: -webkit-calc(100% - 10px); 
width: -moz-calc(100% - 10px); 
width: calc(100% - 10px);"> 

<button class="btn btn-large btn-primary" type="submit" > GO </button></center> 
</form>                    

Answer 1

Читать этот блог http://bradfrostweb.com/blog/mobile/fixed-position/ о фиксированном позиционировании на мобильных устройствах.

Answer 2

Взгляните на это: http://jsfiddle.net/4bPuT/1/

Если я правильно понимаю, что вы могли бы сделать в абсолютном позиционируется вход, чтобы установить как слева и справа CSS атрибуты 0, так что получить максимальную ширину тока контейнер.

<div class="container"> 
    <input id="search" type="text" name="search" placeholder="I resize"> 

    <!-- other content --> 

</div> 

CSS:

.container{ 
    width:100%; 
    height:auto; 
    position:relative; 
} 

.container #search{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
}