根据用户分辨率修改按钮大小

Question

如何使按钮在不同屏幕分辨率上保持大小？我试过使用'%‘，但到目前为止它只适用于div。

.button{
        width:x;
        height:y;
       }

X和y应该有哪些值才能根据屏幕分辨率修改按钮？

Answer 1

添加视图端口大小vw或vh会将按钮设置为浏览器大小。因此，如果浏览器是全屏的，它将接近于该分辨率。

​

button {
  width: 10vw;
  height: 10vh;
}
body {
  height: 100vh;
}

<button>Create</button>

​

Answer 2

试着像这样使用填充物，并将它内联。

.button
{

display:inline-block;
padding: 2%;

}

如果要增加高度，请使用如下所示的行高属性

.button
{

line-height: 1.5rem;
display:inline-block;
padding: 2%;

}