レスポンシブ対応が簡単にできる!なBootstrap様ですが、ブレークポイントでうーんな部分がありました。
今回はヘッダーに必ずカートを検索を表示させるようにしたかったのですが、ランドスケープでアクセスした場合に表示される情報が少なすぎる!
情報量の差がやばいの図
デフォルトの設定ではこれはしょうがないのですが、画面の半分ヘッダーってのは正直いただけないので、ランドスケープ時には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
今回は全体的に変更したので上記な感じでしたが、状況によっては別な場所になるかもしれません。
作成自体が楽しすぎて全然進んでません。