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

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の場合だけ横の空白が狭くなっています。

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

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍