Question

我正在使用HTML和JavaScript制作一个Android移动应用程序。问题是，我把它发送给我的朋友进行测试，屏幕上的按钮很小。使用CSS，我通过更改CSS中的文本大小来更改按钮大小。有没有办法可以自动更改按钮大小，使其与屏幕大小成比例？如果没有，我如何使大屏幕的按钮更大，小屏幕的按钮更小？

请注意：我只使用HTML，JavaScript和CSS。如果你给我其他任何东西，请鬃毛复制和粘贴，因为我不知道如何将它合并到我的代码中。

Answer 1

可能是通过在标题

中添加此标记来完成的

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

或/和以百分比设置宽度。

离。

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

根据屏幕大小自动调整HTML按钮的大小？

3 个答案: