按钮元素在手机上看起来很小

Question

我有一个简单的输入和按钮。无论屏幕大小如何，该按钮在实际计算机上看起来都很好。第一个屏幕截图是从开发工具的移动视图中看到的。然而，当我真正用手机访问该网站时，我得到了第二张照片。如您所见，该按钮比桌面设置上的要短。关于如何解决这个问题的任何想法？

what it looks like on desktop and should look like on mobile

What it actually looks like on mobile

.input-field {
  width: 370px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  height: 35px;
  outline: none;
  border: none;
  font-size: 16px;
  @media (max-width: 500px) {
      width: 250px;
  }

}
.email-input {
  display: flex;
  height: 35px;
  justify-content: center;
  align-items: center;
  margin-top: 60px;

}
.email-button {
  height: 37px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #50AE54;
  color: white;
  font-size: 16px;
  width: 100px;
  border: none;
  outline: none;
  @media (max-width: 600px) {
      width: 75px;
  }

<div class="email-input">
     <input type="text" class="input-field" [(ngModel)]="email_address" placeholder="Email me for updates" />
     <button class="email-button" (click)="subscribe()">Send</button>
</div>

Answer 1

我已经在 codepen 中运行了你的代码和样式，它在不同的设备上看起来都是一样的。

如我所见，不仅按钮样式受到影响，其余部分也受到影响：输入框中的文本填充。

也许父样式正在影响此组件的样式？

（如果您使用 Chrome 进行调试，您可以轻松检查元素 - How to inspect CSS element using Chrome?）

Answer 2

您可以使用引导程序轻松创建响应式网页 链接

Bootstrap

check this also

还要检查

https://en.wikipedia.org/wiki/Responsive_web_design

用于响应式网页设计

Answer 3

添加 *{ box-sizing: border-box } 到 CSS。
这解决了问题。