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

Automatically resize HTML buttons based onscreen size?

本文关键字：HTML 按钮 调整 屏幕      更新时间：2023-09-26

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

请注意：我只使用HTML、JavaScript和CSS。如果你给我任何其他东西，请允许复制和粘贴，因为我不知道如何将其包含在我的代码中。

听起来你想要一个"响应式"设计，使用媒体查询和"断点"。

断点将是您想要支持的每个设备的宽度。

  • 对于iphone5，您可以使用"641px"作为最大宽度。

  • 首先定义标准类。然后偏离使用css的媒体查询，比如so

#button{
     width:100%;         // first define your class
    }
   @media (max-width: 640px) {
      #button {
         width:50%;
      }
    }

http://iosdesign.ivomynttinen.com

这可能是通过在标题中添加此标记来完成的

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

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

前任。

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

您需要使用元标记进行响应：

<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%;
     }
}
相关文章：