如何使搜索框的自動位置和自動調整大小，而不考慮屏幕分辨率？

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> 

我搜索了很多，但使其更加看到的例子，然後換了個姿勢，從像素比例，但仍然存在問題。

在桌面上看起來不錯，但問題是當我在手機或iPad上看到它時，搜索框的位置沒有改變。我只是想要固定盒子的位置，而不考慮不同屏幕尺寸的屏幕分辨率。

---

我已經改變了代碼和它的作品多了幾分精緻，除了按鈕這裏的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; 
}