CSS：不同屏幕分辨率的方形按钮

Question

您想要将按钮显示为方形。如果我使用像素比我有屏幕分辨率的问题。如果我使用百分比，那么比例不正确

你知道怎么做吗？

.serviceButton{
    position:absolute;
    left: 20%;
    top: 20%;
    width: 300px; //if I use this than the sqaure is small
    height: 300px; // in big screen resolutions
}


<div>
    <button type="button" class="serviceButton">Services</button>
</div>

Answer 1

有一篇关于here的博文。它可能会满足您的需求，甚至可以缩小窗户的尺寸。

这是你需要的HTML：

<div class="box square"> 
    <div class="content">Aspect ratio of 1:1</div> 
</div>

并将其添加为您的css：

.box {
    position: relative;
    width: 50%;     /* desired width */
}
.box:before {
    content: "";
    display: block;
}
.square {
    padding-top: 100%; /* Play with this value for different ratios */
}
.content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}