Bootstrap 3のブレークポイントとメディアクエリ

Bootstrap 3 media queries documentation]1にはこう書かれています。

以下のメディアクエリをLessファイルで使用し、グリッドシステムの主要なブレークポイントを作成しています。 とあります。 Extra small devices (phone, less than 768px): Bootstrapのデフォルトであるため、メディアクエリはありません。

スモールデバイス（タブレット、768px以上）に対応。 @media (min-width: @screen-sm-min) { ...} となっています。 中型デバイス（デスクトップ、992px以上）の場合 @media (min-width: @screen-md-min) { ...} となります。 大型デバイス（大型デスクトップ、1200px以上）の場合。 @media (min-width: @screen-lg-min) { ...}

メディアクエリでは、@screen-sm, @screen-md, @screen-lg の名前も使えるようになっているのでしょうか？私の場合はうまくいきませんでした。動作させるには、@media (min-width: 768px) {...}のようにピクセル単位で指定しなければなりません。私が何か間違っているのでしょうか？

また、エキストラ・スモール・デバイス用の480pxというのは誤記でしょうか？767pxまでとすべきではないでしょうか？ (since removed from the documentation)

Dave Powers
編集された質問 16日 7月 2019 в 9:19
プログラミング
twitter-bootstrap-3 twitter-bootstrap breakpoints media-queries
25日 10月 2013 в 2:46
7 ビュー

Bootstrapはメディアクエリをあまりうまく文書化していません。screen-sm,screen-md,screen-lg` の変数は、実際には LESS の変数を参照しており、単純な CSS ではありません。

Bootstrapをカスタマイズすると、メディアクエリのブレークポイントを変更することができ、コンパイル時には@screen-xx変数がscreen-xxとして定義したピクセル幅に変更されます。このようにして、このようなフレームワークは、一度コード化した後、エンドユーザーがニーズに合わせてカスタマイズすることができるのです。

似たような質問がこちらにもありましたので、こちらをご覧ください。https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries

CSSでは、Bootstrapが行っていることを上書きしたり、追加したりするために、従来のメディアクエリを使用する必要があります。

2番目の質問に関しては、それはタイプミスではありません。画面が768px以下になると、フレームワークは完全に流動的になり、あらゆるデバイスの幅に合わせてリサイズされるため、ブレークポイントの必要性がなくなります。480pxのブレークポイントは、モバイル最適化のためにレイアウトに特別な変更を加えるために存在しています。

実際の動作を確認するには、同社サイトの例（http://getbootstrap.com/examples/navbar-fixed-top/）にアクセスし、768px以降のデザインがどのように処理されるか、ウィンドウサイズを変更してみてください。

Community
編集した答え 23日 5月 2017 в 10:31
解説 (2)

この問題は、https://github.com/twbs/bootstrap/issues/10203 で議論されています。 現在のところ、互換性の観点からGridを変更する予定はありません。

Bootstrap はこのフォーク、ブランチ hs から入手できます: https://github.com/antespi/bootstrap/tree/hs

このブランチでは、480pxで追加のブレークポイントが与えられているので、それを利用する必要があります。

1.モバイルファーストでデザインする（XS、480px以下）。 2.HTMLにHS（Horizontal Small Devices）クラス（col-hs-*, visible-hs, ...）を追加し、横長のモバイルデバイス用にデザインする（HS、768px以下）。 3.タブレット端末用にデザインする（SM、992px以下 4.デスクトップ用のデザイン（MD、1200px以下 5.ラージデバイス用のデザイン（LG、1200px以上

モバイルファーストのデザインは、Bootstrap 3を理解する上で重要です。これは、BootStrap 2.xからの大きな変更点です。ルールテンプレートとしては、（LESSで）以下のようになります。

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}
Dave Powers
編集した答え 17日 7月 2019 в 1:52
解説 (4)

480pxへの言及が削除されました。その代わりに、次のように書かれています。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Bootstrap 3では、768px以下のブレークポイントはありません。

もしあなたが @screen-sm-min や他の mixin を使いたいなら、LESS でコンパイルする必要があります。http://getbootstrap.com/css/#grid-less を参照してください。

Bootstrap 3とLESSの使い方のチュートリアルはこちらです: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

解説 (0)