メディアクラスのCSSクラスをBootStrapクラスと同等に設定する

Question

これは単純なCSSの質問です。私は以下のBootStrapボタンを持っています。これは小さな画面サイズで小さくしたいのです（下記参照）。本質的にはにクラスを変更するにはどのようなI "BTN-XS BTN BTN-デフォルト"

<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

@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; 
    } 
} 

Answer 2

（下記の擬似コードを参照）、ここであなたの質問にいくつかの素晴らしい答えがあります。個人的にresize buttons responsively in bootstrap

が、私はボタンが応答ビューのwidth属性を使用してサイズを作るのが好き。

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