css - 如何调整具有大字体的 btn-xl 以适合小屏幕？

Question

所以我在 Bootstrap 3 文档中有以下内容:

<div class="col-xs-10 col-lg-12 col-md-12 text-center">
        <a class="btn btn-success btn-lg btn-xl" href="#package-details">
            <span class="text-uppercase"><span class="text-white-dark">Pre-Order &amp; </span>Pledge Now</span>
        </a>
</div>

使用 1 个 css 规则覆盖:

.btn-xl {
    font-size: 34px;
    padding: 8px 10px;
    border-radius: 6px;
}

但在小型设备上它会卡在屏幕外。在较大的设备上看起来不错。

如何在不影响其他屏幕当前尺寸的情况下使其在小屏幕上达到大约 80% 的宽度(相对于当前的 105%)？

换句话说，我想要的是每当移动设备加载我的网站时，我希望按钮变大...但不会溢出页面。通过 col-md-* 和 col-lg-*，它甚至不必与大屏幕的比例相同。

请注意，我不想使用 JS，只想使用 CSS。

可以看到live here

Answer 1

自己想通​​了:

@media (max-width: 400px) { 
    h1 {
        margin-top: 5px;
        padding-top: 10px;
    }

    .btn-xl {
        font-size: 22px;
        padding: 10px 16px;
        border-radius: 6px;
        margin-left: auto;
        margin-right: auto;
    }
}