如何将网站菜单按钮的图像转换为CSS

Question

我目前使用的图像作为按钮的背景，当点击按钮时，它会发生变化，以便给出按下它的印象，但是我想让页面更具响应性，以便在浏览器时窗口调整大小也改变了大小，并且使用这种方式似乎不会这样做。

有问题的图片位于

之下

有没有什么办法可以在CSS中做出类似的结果呢？

我试过这样做，但是，我有一个新问题，当浏览器窗口较小时，文本不会随背景缩小，我错过了什么？

#buttons {
    font-family:arial;
    text-align:center;
    color:#b5a642;          
}
#buttons ul {
    list-style-type:none;
    padding:0;
}
#buttons li a {
    width:10%;
    display:block;
    background-color:#7B4A18;
    color:#b5a642;
    padding:10px;
    box-shadow: 0 -30px 50px #603913 inset; 
    border: 5px solid #7B4A18;
    text-shadow: 0px 2px 4px #222, 0px 2px 4px #333;
}
#buttons li a:active {
    background-color:603913;
    box-shadow:0 -30px 50px #7B4A18 inset, 0 0 15px #222 inset;
    border:5px solid #603913;
    text-shadow:2px 2px 1px #706729;
}

Answer 1

您可以使用CSS Media Queries来根据屏幕尺寸更改DOM的CSS。

在下面的示例中，我尝试简化代码以显示基础概念。 调整浏览器窗口大小时，字体大小将会改变。

https://jsfiddle.net/9r2t6645/

<div id="buttons">
<ul>
  <li>Home</li>
</ul>
</div>

#buttons {
    color:blue;   
    font-size: 50px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
  #buttons  {
    font-size: 20px;
    color:red;
  }
}

Answer 2

#buttons li a {
   font-size:3vw;
}

以vw（视口宽度）/ vh（视口高度）指定宽度和高度类似于以屏幕百分比指定（与按钮容器的百分比相比）

Answer 3

＆＃13;

＆＃13;

#buttons {
    color:blue;   
    font-size: 50px;
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
  #buttons  {
    font-size: 20px;
    color:red;
  }
}

＆＃13;

<div id="buttons">
<ul>
  <li>Home</li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

不要头疼，尝试使用bootstrap框架，它将100％响应。