當瀏覽器屏幕尺寸發生變化時，如何更改我的html輸入字段？

我在我的網頁中有搜索字段，現在我需要在網頁瀏覽器屏幕大小更改時更改大小。當瀏覽器屏幕尺寸發生變化時，如何更改我的html輸入字段？

比方說，我最初的瀏覽器屏幕尺寸是全尺寸的，所以它會根據最大寬度進行顯示，現在當我減小網頁瀏覽器屏幕尺寸時，它也會減小搜索字段大小，最大寬度。任何想法我怎麼能做到這一點？，在這裏，我試過。

.navbar-search input[type="text"]{ 
    font-size: 15px; 
    height: auto; 
    margin-bottom: 05px; 
    max-width: 565px; 
    min-width: 50px; 
}

這裏我找到了一個例子，如果你縮小屏幕尺寸，搜索字段大小也會改變。 this link

來源

2013-03-06 Himanshu Patel

爲什麼不嘗試檢查網站的樣式表並查看它是如何實現的？ [你有什麼嘗試？]（http://whathaveyoutried.com） – Terry 2013-03-06 17:23:07

http://matthewjamestaylor.com/blog/perfect-full-page.htm或http://www.maxdesign.com.au/articles/css-layouts/ – Pamma 2013-03-06 17:24:59

@Terry ，更新我的問題 – 2013-03-06 17:29:21

我會說想其他選項（而不是div，css和@media）就像Twitter bootstrap。

它帶有一個響應式的css如bootstrap-responsive.css並且關於您的問題，請檢查this link，您有多個選項form。

您可以將屏幕大小重新設置爲手機屏幕，但佈局工作正常。

來源

2013-03-06 21:58:06

您需要設置最大寬度，最小寬度和具有百分比而非設定值的寬度。（寬度：75％，不960x75像素）

來源

2013-03-06 17:24:32 illinoistim

我試過width：270％;最大寬度：270％;最小寬度：50％;當我調整屏幕大小時，我沒有看到任何效果，請引導我嗎？ – 2013-03-06 18:27:43

對不起，如果我不清楚，我的意思是設置在一個百分比的寬度和最大和最小寬度在設定值。見Vivek Ghaisas的回答。 – illinoistim 2013-03-06 19:25:56

它們與@media做查詢

CSS：

@media (max-width: 480px){ 
    /* ... */ 
    .header .search-query{width:100px} 
}

然後他們重新輸入寬度不同@media-queries用於不同的上下文

@media (max-width: 680px){ 
    /* ... */ 
    .header .search-query{width:150px} 
}

Media查詢是一個CSS3模塊，允許內容呈現適應諸如屏幕分辨率等條件。智能手機與高清屏幕）。它於2012年6月成爲W3C推薦標準。1是響應式網頁設計的基石技術。

媒體查詢由媒體類型和至少一個表達式組成，該表達式使用媒體特徵（如寬度，高度和顏色）來限制樣式表的範圍。在CSS3中增加了媒體查詢功能，可以根據特定範圍的輸出設備量身定製內容呈現，而無需更改內容本身。

來源

2013-03-06 17:32:51

@media查詢是什麼？跳轉代碼更改之前是否有鏈接供參考？基本上我不知道媒體查詢 – 2013-03-06 18:29:02

在我的回答中有一個到wikipedia.org/Media_queries的鏈接 – 2013-03-06 18:31:44

有兩種方法可以做到這一點。

一個是簡單地使用百分比，而不是硬編碼像素。如果您在div有input場，你可以指定輸入字段的寬度是的div像這樣的總寬度的百分比：

input { 
    max-width: 200x; 
    width: 80%; 
    min-width: 50px; 
}

另一種方法是使用更復雜的CSS3 media queries。如果你想使用它們，快速google search將有所幫助。

使用百分比總是更容易，但不會給你可能需要的良好控制。做出明智的選擇。

來源

2013-03-06 18:16:24

我設置了max-width：800px;寬度：270％;最小寬度：190px;沒有什麼幫助，但最大寬度：200x;寬度：80％;最小寬度：50px;工作正常，有什麼想法？ – 2013-03-06 18:33:38

爲什麼設置270％的寬度？我認爲它會把它扔掉。 – illinoistim 2013-03-06 19:28:36

@HimanshuPatel：將子元素設置爲父元素大小的270％是沒有意義的。一般來說，子元素應該適合他們的父母。使用小於或等於100％的百分比，你應該沒問題。 – 2013-03-06 19:56:01

當瀏覽器屏幕尺寸發生變化時，如何更改我的html輸入字段？

回答

相關問題