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 media query根据设备屏幕分辨率更改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
    }
}

更改浏览器大小，并查看宽度达到300px或更低时按钮采用先前定义的样式的方式。

jsFiddle

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

1 个答案: