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