按钮百分比宽度重新尺寸问题

Question

我有按钮

#buttons {
/*Div containing the buttons*/
margin-top: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
border: 1px solid black;
}
.navbutton {
/*8 buttons*/
height: 38px;
float: left;
min-width: 60px;
max-width: 140px;
display: inline-block;
width: 12.5%;
background-image: url(button.jpg);
background-size: 100%;
color: white;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #d0d0d0;
border: outset #555 1.5px;
cursor: pointer;
text-align: center;
font-size: 16px;
}
#content {
/*containing everything, centred*/
margin-left: auto;
margin-right: auto;
width: 90.54%;
color: white;
border: 2px solid yellow;
}

和html

<div id="content">
    <div id="buttons">
        <button type="button" class="navbutton" onclick="location.href='#';" style="color: #149ae7; border-top-left-radius: 5px; border-bottom-left-radius: 5px;">HOME</button>
        <button type="button" class="navbutton">PART A</button>
        <button type="button" class="navbutton">PART B</button>
        <button type="button" class="navbutton">PART C</button>
        <button type="button" class="navbutton">PART D</button>
        <button type="button" class="navbutton">PART E</button>
        <button type="button" class="navbutton">PART F</button>
        <button type="button" class="navbutton" style="color: #e7db17; border-bottom-right-radius: 5px; border-top-right-radius: 5px;">HELP</button>
    </div>
</div>

当我减少浏览器窗口的宽度时，如何将按钮"挤压"？像www.dotacinema.com（但所有按钮相同大小）

当前它不起作用，如果我减少网站的宽度，一切都像单个图像一样，因此没有重新缩放。

谢谢

Answer 1

您可以使用CSS媒体查询来执行此操作，例如，当窗口的宽度小于400px时，您可以使用该查询来定义元素的新样式。

这是小提琴。

相关代码位于CSS的顶部：

@media(max-width:400px){
   ul li{
    display: block !important;
    width:100% !important;
    text-align: left !important;
    margin-bottom:2px;
   }
}