css - 手机/平板电脑不同的按钮高度

Question

我有这个链接，它在移动设备上被设计为按钮，我面临的问题是它在手机和平​​板电脑上看起来不同。这是因为设备分辨率还是我应该通过 CSS 修复的问题。这是我当前的 CSS

CSS

border-radius: 4px;
text-align: center;
color: white;
padding: 10px 30px;
border: 0;
position: relative;
text-decoration: none;
margin: 15px 0 0 0;
display: inline-block;
-webkit-appearance: none;
font: normal 16px 'helen_bgbold';
line-height: 30px;
background: #00aeef;
background: -webkit-linear-gradient(left, #00aeef, #58c5c4);
background: linear-gradient(to right, #00aeef, #58c5c4);

Answer 1

您可以使用 css 媒体查询根据设备屏幕分辨率更改 html 控件/元素样式。

HTML :

<button>Button</button>

CSS:

button{
    // default resolution style
}

@media screen and (max-width: 300px) {
    button {
        // style for screen resolution of width 300px or less
    }
}

更改浏览器大小并查看当宽度达到 300 像素或更小时您的按钮如何采用之前定义的样式。

jsFiddle