Bootsrapで画面幅によってCSSの一部だけを切り替える[LESS][Twitter]


Eye Catch Image

Twitter BootsrapをLESSで使われている方限定ですが、CSSの中の一部だけを切り替える方法を紹介します。たとえばスマホのときだけ画像の横の空白(margin, paddingとか)を変更したい時などに使えます。


😸 CSSの切り替え方

LESSを使って画面幅を切り替える方法です。まず、HTML側の修正。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

ちなみにHAMLの場合はこちら。(HAMLの方以外は無視してください)

%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
%link{:href => "assets/css/bootstrap-responsive.css", :rel => "stylesheet"}

続いてLESS側の書き方は次のとおり。

/* スマホ以外を対象 */
@media (min-width: 481px) {
.thumbnail_box {
padding: 8px;
margin: 0 10px 18px 10px;
}
}
/* スマホ対象 */
@media (max-width: 480px) {
.thumbnail_box {
padding: 4px;
margin: 4px;
}
}

結果はこちら、まずスマホ以外の場合です。

写真

次にiPhoneの場合。iPhoneの場合だけ横の空白が狭くなっています。

fpu_tmp_1355628898.0756_ea491f

もちろんこの応用で、タブレットの場合を増やすこともできます。
詳しくはTwitter/Bootstrapの公式の説明を御覧ください

📚 おすすめの書籍