Автоматически изменять размер HTML-кнопок на основе размера экрана?

Question

Я делаю мобильное приложение для Android, используя HTML и JavaScript с CSS. Проблема в том, что я отправил ее моему другу, чтобы проверить, и кнопки на экране маленькие. Используя CSS, я изменил размер кнопки, изменив размер текста в CSS. Можно ли изменить размер кнопки так, чтобы она была пропорциональна размеру экрана? Если нет, как бы я сделал кнопки больше для больших экранов и меньше для меньших экранов?

Обратите внимание: я использую только HTML, JavaScript и CSS. Если вы дадите мне что-нибудь еще, пожалуйста, заставьте его копировать и вставлять, потому что я не буду знать, как включить его в свой код.

Answer 1

Это, вероятно, быть сделано путем добавления тега в заголовке

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

или/и настройка ширины в процентах.

ex.

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

Answer 2

Это звучит, как вы хотите «отзывчивый» дизайн, использовать media-queries и «контрольные точки».

Точки останова будут шириной для каждого устройства, которое вы хотите поддерживать.

• для iphone 5 вы использовали бы «641px» как максимальную ширину.

• Вы сначала определяете стандартный класс. Затем отклониться от использования запросов средств массовой информации с помощью CSS, как так

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

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

http://iosdesign.ivomynttinen.com

Answer 3

Вы должны использовать мета-тег для отзывчивым:

<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%; 
    } 
}