CSSチート・ブラウザ幅に応じて UI コントロールを出し分ける

• あるWebサービスの開発メモ・目次ページに戻る
• あるWebサービスの開発メモ・CSS チートに戻る

tl;dr

• css の display プロパティの値に none を指定して html 要素を非表示にする
• ブラウザ幅の検出にはメディアクエリー @media screen を使用する

やりたいこと

開発中の Web サービスでは、投稿記事のカテゴリーを指定して記事検索を受けつけるようにしています

このカテゴリーの選択を行う UI コントロールについて、PC や タブレット端末ではボタンコントロールを使用し、携帯端末のような画面横幅が狭い状況ではプルダウンリストコントロールを使用できるようにしたいと思っています。

このようなコントロールを出し分ける方法がわからず、かなり時間を使ってしまいましたので、以下にまとめておきます

実装

(/html)

<div class="select_outer">select</div>
<div class="button_outer">button</div>

(*CSS)

.button_outer {
  display: none;
}
@media screen and (min-width: 640px) {
  .button_outer {
    display: block;
  }
  .select_outer {
    display: none;
  }
}

これでいけます

動作確認

参考情報

メディアクエリーに関しては メディアクエリーの初心者向けガイド で理解できました