HTML按钮大小

Question

你好，我已经创建了一个带有横幅的网页，并且一个按钮位于横幅下方。当我在大屏幕上访问我的网站时，横幅会调整大小以适应屏幕，但按钮保持不变。我试过寻找答案，但找不到它。

这里是我的代码：

HTML

<a href='http://www.aporiagrand.com/shop/' class='button'>SHOP</a> 

CSS

.button { 
border: 2px solid #ffffff; 
background: #000000; 
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000)); 
background: -webkit-linear-gradient(top, #000000, #000000); 
background: -moz-linear-gradient(top, #000000, #000000); 
background: -ms-linear-gradient(top, #000000, #000000); 
background: -o-linear-gradient(top, #000000, #000000); 
background-image: -ms-linear-gradient(top, #000000 0%, #000000 100%); 
padding: 12px 24px; 
-webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
border-radius: 0px; 
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0; 
text-shadow: #000000 0 1px 0; 
color: #ffffff; 
font-size: 18px; 
font-family: helvetica, serif; 
text-decoration: none; 
vertical-align: center; 
position:relative; 
transition: .5s ease; 
top: 1px; 
left: 45%; 
right: -45%; 
bottom: -20%; 
} 
.button:hover { 
border: 2px solid #ffffff; 
text-shadow: #ffffff 0 1px 0; 
background: #ffffff; 
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); 
background: -webkit-linear-gradient(top, #ffffff, #ffffff); 
background: -moz-linear-gradient(top, #ffffff, #ffffff); 
background: -ms-linear-gradient(top, #ffffff, #ffffff); 
background: -o-linear-gradient(top, #ffffff, #ffffff); 
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%); 
color: #000000; 
} 
.button:active { 
text-shadow: #dbdbdb 0 1px 0; 
border: 2px solid #dbdbdb; 
background: #dbdbdb; 
background: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#ffffff)); 
background: -webkit-linear-gradient(top, #dbdbdb, #dbdbdb); 
background: -ms-linear-gradient(top, #dbdbdb, #dbdbdb); 
background: -o-linear-gradient(top, #dbdbdb, #dbdbdb); 
background-image: -ms-linear-gradient(top, #dbdbdb 0%, #dbdbdb 100%); 
color: #dbdbdb; 
} 

Answer 1

我注意到，您的字体大小在CSS按钮是固定的，所以按钮的大小是不在小屏幕上很小。

看到这个代码：

1vw = 1% of viewport width 

1vh = 1% of viewport height 

1vmin = 1vw or 1vh, whichever is smaller 

1vmax = 1vw or 1vh, whichever is larger 

在stackoverflow link

，并尝试改变字体大小：18像素;到像font-size：4.0vw;根据你的要求。

Answer 2

我假设你正在使用这个

position:relative; 
transition: .5s ease; 
top: 1px; 
left: 45%; 
right: -45%; 
bottom: -20%; 

，以此来中心的按钮;可能我建议，而不是试图沿该线使用的东西：

margin: 0 auto; max-width:25%; text-align:center; 

你的按钮现在不会与你的网站规模，因为我相信给它的唯一的事情任何规模大小是你施加了填充。使用百分比通常是处理这类问题的好方法。