css - CSS 桌面/移动按钮样式

Question

我设置了一些 CSS 按钮的样式，它们看起来很棒，但是当我在移动设备上打开页面时，它们看起来很糟糕并且不使用定义的样式。通常如何在所有设备上保持 CSS 中按钮的样式？

这是我在浏览器中看起来不错的按钮的代码：

input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}

input[type="button"]:hover
{
background: #00a0db;
}

但这就是它在移动设备上不同页面上的实际样子。

Answer 1

字体大小的问题..尝试为字体设置 px 值..应该没问题..

喜欢

input[type="button"]
{
  font-size:14px;
}

Answer 2

没有灵丹妙药。确保您的样式具有适当的特定于平台的指令（即-webkit-），并且最重要的是，在正在运行的平台上受支持。