【Bootstrap】ランドスケープではヘッダーを複数カラムにしたい

レスポンシブ対応が簡単にできる!なBootstrap様ですが、ブレークポイントでうーんな部分がありました。
今回はヘッダーに必ずカートを検索を表示させるようにしたかったのですが、ランドスケープでアクセスした場合に表示される情報が少なすぎる!

landscape設定前 portrite
情報量の差がやばいの図

デフォルトの設定ではこれはしょうがないのですが、画面の半分ヘッダーってのは正直いただけないので、ランドスケープ時には2カラムにしたいと思います。対応方法自体は公式にちゃんと載っています。
CSS/MediaQuery · Bootstrap

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap *//* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... } 

環境はbowerでbootstrap-sassです。
適宜読み替えてください。sassじゃない場合はデフォルトのcssファイルに記述することになると思います。
/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss

@media (min-width: @screen-sm-min), (orientation:landscape) { ... }/* Medium devices (desktops, 992px and up) */

andしか使ったことがなかったのですが、今回初めてor(カンマ)を指定しました。

3/3 Media Queriesで、画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About

で。できました!
landscape_after

今回は全体的に変更したので上記な感じでしたが、状況によっては別な場所になるかもしれません。

作成自体が楽しすぎて全然進んでません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください