Javascript 引导-针对每个环境，动态调整按钮和文本字段的高度大小

我正在使用Bootstrap3创建一些HTML响应表单，我正在尝试做一件事，关于布局

我希望按照以下规则动态更改按钮和文本字段的高度：

在桌面设备上，使用小按钮/文本字段

在移动设备上，使用大按钮/文本字段

我知道我可以通过使用和类来实现这一点。但是，我只想在用户从移动设备访问页面时使用这些类，而不是总是这样

我也知道，您可以使用显示/隐藏HTML元素，但我需要为所有按钮/文本字段提供一个id，因此我不知道是否可以复制这些元素并将它们包装在一个div中，该div将在特定环境中显示，因为根据HTML规范，具有相同id的两个元素是错误的

---

我尝试了一种基于的方法，我只是根据每个状态/环境添加/删除这些类。这是可行的，但有更简单的方法吗？

要根据屏幕大小更改特定的元素样式，可以使用媒体查询。例如：

<button class="btn dynamic-button">

---

这是纯CSS吗？或者更少/无礼？你确定不是更少吗？因为我试过了，但没用。在我看来，@screen xs max是一个较小的变量，我现在不想将CSS转换为较小的变量。然而，我尝试了从这个链接的方法，它的工作：。它基本上将较小的变量更改为以像素为单位的值。

@media (max-width: @screen-xs-max) {
    .dynamic-button {
        height: 20px;    
    }
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .dynamic-button {
        height: 40px;    
    }
}