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

【问题标题】：How do I resize a btn-xl that has large font to fit properly on a small screen?如何调整具有大字体的 btn-xl 大小以适合小屏幕？
【发布时间】：2014-07-03 07:59:50
【问题描述】：

所以我在 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

【问题讨论】：

你写一个媒体查询，仅此而已。
你能给我看一个例子吗？就像在......特定于这个例子。

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案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;
    }
}

【讨论】：

为什么是 h1 css？如果问题已被回答，请将问题标记为已回答。