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

Question

所以我有一个自举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; 
    } 
}