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; 
}