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

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

Answer 2

font-size ...尝试设置font..it的px值的问题应该是Ok ..

像

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