css - 如何响应地调整方形按钮的大小？

Question

我正在尝试使用 Bootstrap 类创建一个方形按钮。然而。它只是水平自动调整大小。当我调整浏览器大小时，高度不会调整大小并保留其原始大小。我怎样才能水平和垂直调整这些按钮的大小？

<div class="row">
        <div class="col-xs-4">
            <a href="@Url.Action("Axis","Department")" id="axisBtn" class="btn btn-sq btn-info btn-block">
            </a>
        </div>
        <div class="col-xs-4">
            <a href="@Url.Action("Engineering","Department")" id="engBtn" class="btn btn-sq btn-default btn-block">
            </a>
        </div>
        <div class="col-xs-4">
            <a href="@Url.Action("Affect","Department")" id="affectBtn" class="btn btn-sq btn-default btn-block">
            </a>
        </div>
    </div>

.btn-sq {
    width: 300px;
    max-width: 100%;
    max-height: 100%;
    height: 300px;
}

Answer 1

创建一个名为 responsive.css 的文件并将其添加到您的样式中。最好在其他 css 文件之后添加此文件，因为您希望这些规则优先于其他 css 规则。

这将是您的 responsive.css 的内容

/* Style for Extra Large Screen */
@media (max-width:1199px) {
    .btn-sq {
        width: 300px;
        max-width: 100%;
        max-height: 100%;
        height: 300px;
    }
}

/* Style for Large Screen */
@media (max-width:991px) {
    .btn-sq {
        width: 300px; 
        max-width: 100%;
        max-height: 100%;
        height: 300px;
    }
}

/* Style for Medium Screen */
@media (max-width:767px) {
    .btn-sq {
        width: 200px; /* whatever width you want for medium screen */
        max-width: 100%;
        max-height: 100%;
        height: 150px; /* whatever height you want for medium screen */
    }
}

/* Style for Small Screen */
@media (max-width:575px) {
    .btn-sq {
        width: 200px; /* whatever width you want for mobile screen */
        max-width: 100%;
        max-height: 100%;
        height: 150px; /* whatever height you want for mobile screen */
    }
}

这样，根据您的屏幕大小，将选择这些部分之一并将其应用于您的 HTML。