どのように小さなボタンを持っているかcss

Question

これはionic2よりも多くのCSSの質問です。

私は、CSSを使用してすべてのボタンを小さくしたいと思います。ここにはPlunkerの例があります。可能であれば、それは応答性がありますか？上書きするためにあなたのCSSでこれを追加segment-button

.segment-button { 
    border-style: none; 
    border-color: #e62100; 
    color: #e62100; 
    border-width: thin; 
    font-size: 12px; 
} 

Answer 1

のもと.ion-content

そのに従ってリサイズ：あなただけの幅と高さを変更する必要が

.segment-button:not(:first-of-type) { 
    max-width: 30px; 
    line-height: 30px; 
    height:30px; 
} 

Answer 2

を（とmax-width/max-height、およびline-heightを調整します）。.segment-button: first-of-type、.segment-button:not(:first-of-type),.segment-button:last-of-type,.md .segment-button。このような

何か：

.md .segment-button { 
    border-style: none; 
    border-color: #e62100; 
    color: #e62100; 
    border-width: thin; 
    font-size: 12px; 
} 

.segment-button:first-of-type { 
    width: 40px; 
    height: 38px; 
    border-radius: 50%; 
    font-size: 15px; 
    line-height: 40px; 
    max-width: 40px; 
    max-height: 40px; 
} 

.segment-button:not(:first-of-type) { 
    width: 40px; 
    height: 38px; 
    border-radius: 50%; 
    font-size: 15px; 
    line-height: 40px; 
    max-width: 40px; 
    max-height: 40px; 
} 

.segment-button:last-of-type { 
    width: 40px; 
    height: 38px; 
    border-radius: 50%; 
    font-size: 15px; 
    line-height: 40px; 
    max-width: 40px; 
    max-height: 40px; 
}