根據屏幕尺寸自動調整HTML按鈕的大小？

我正在製作一個使用HTML和JavaScript與CSS的Android手機應用程序。問題是，我將它發送給我的朋友測試，並且屏幕上的按鈕很小。使用CSS，我通過在CSS中更改文本大小來更改按鈕大小。有沒有辦法讓我自動調整按鈕大小，使其與屏幕大小成正比？如果不是，我怎樣才能讓大屏幕的按鈕更大，更小的屏幕更小？根據屏幕尺寸自動調整HTML按鈕的大小？

請注意：我只使用HTML，JavaScript和CSS。如果你給我任何其他的東西，請鬃毛複製和粘貼，因爲我不知道如何將它合併到我的代碼中。

來源

2015-02-09 Fyrebend

參考此鏈接http://stackoverflow.com/questions/11777598/font-size-relative-to-the-users-screen-分辨率/ 11777771＃11777771 – 2015-02-09 04:28:16

它可能是由在頭

<meta name="viewport" content="width=device-width" />

或/添加該標籤並以百分比設定寬度來完成。

ex。

<input type="text" style="width:30%" />

來源

2015-02-09 04:40:47

這聽起來像你想要一個'敏感'的設計，使用media-queries和'斷點'。

斷點將是您想要支持的每個設備的寬度。

對於iphone 5，您將使用'641px'作爲最大寬度。
你首先定義標準類。通過使用CSS媒體查詢，像這樣

#button{ 
    width:100%;   // first define your class 
    } 

    @media (max-width: 640px) { 
     #button { 
     width:50%; 
     } 
    }

http://iosdesign.ivomynttinen.com

來源

2015-02-09 06:57:26 chrismillah

您需要使用元標籤的響應從隨後偏離：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

的HTML：

<input type="submit" name="" class="my_button"/>

的CSS：

input.my_button{ 
    width:50%; 
    height:32px; 
    display:table; 
    margin:0 auto; 
} 
@media screen and (max-width:360px){ 
    input.my_button{ 
      width:100%; 
    } 
}

來源

2015-02-09 08:14:45

根據屏幕尺寸自動調整HTML按鈕的大小？

回答

相關問題