使用媒体查询

Question

希望这是一个简单的CSS问题。我有以下BootStrap按钮，我希望缩小屏幕尺寸（见下文）。本质上我将该类更改为“btn btn-default btn-xs ”

<button type="button" class="btn btn-default btn-sm" id="myButton" >
    <span class="glyphicon glyphicon-envelope"></span>
</button>

我假设我必须使用媒体查询。我可以通过使用ID选择器以某种方式将我的类设置为等于引导类吗？ （见下面的伪代码）

@media only screen and (max-width: 450px) {

    #myButton {
        .btn .btn-default .btn-xs // Inject magic here
    }
}

谢谢

Answer 1

这里有一些很好的答案：resize buttons responsively in bootstrap

就个人而言，我喜欢使用视图宽度属性来响应按钮尺寸。

#myButton {
    width: 20vw;
    padding: 10px;
    }

Answer 2

以下是通过@media查询控制#myButton的CSS的方法。

<button type="button" class="btn btn-default btn-sm" id="myButton" >
    <span class="glyphicon glyphicon-envelope"></span>
</button>

@media only screen and (max-width: 450px) {

    #myButton {
        font-size: 12px;
    }
}

@media only screen and (max-width: 768px) {

    #myButton {
           font-size: 16px; 
    }
}