web-dev-qa-db-ja.com

ブートストラップ3ブレークポイントとメディアクエリ

http://getbootstrap.com/css/ /それは言う：

以下のメディアクエリを使用して、グリッドシステムに重要なブレークポイントを作成します。

超小型デバイス（電話、最大480px）：これはブートストラップのデフォルトなのでメディアクエリはありません。

小型デバイス（タブレット、768px以上）：@media（最小幅：@ screen-sm）{...}

中型のデバイス（デスクトップ、992px以上）：@media（最小幅：@ screen-md）{...}

大型デバイス（大型デスクトップ、1200ピクセル以上）：@media（最小幅：@ screen-lg）{...}

メディアクエリでも@ screen-sm、@ screen-md、および@ screen-lgの名前を使用できるはずですか。それは私にとってはうまくいかないからです。動作するようになる前に、@ media（min-width：768px）{...}のようなピクセル測定を使用する必要があります。私は何か悪いことをしていますか？

また、超小型デバイス用の480pxへの参照はタイプミスですか？それは767pxまで言うべきではないですか？

twitter-bootstraptwitter-bootstrap-3media-queriesbreakpoints
138
Kris Hunt

ブートストラップ4メディアクエリ

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

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap 4はSassのソースCSSを提供しています。これをSass Mixinsで含めることができます。

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

ブートストラップ3メディアクエリ

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

ブートストラップ2.3.2メディアクエリ

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

からのリソース： https://scotch.io/quick-tips/default-sizes- for -Twitter-boototps-media -queries

152
Sophy

ブートストラップはメディアクエリをあまり文書化していません。これらの@screen-sm、@screen-md、@screen-lgの変数は実際にはLESS変数を参照しており、単純なCSSを参照していません。

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

より明確にするためにここに同様の質問： Bootstrap 3.0メディアクエリ

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

あなたの2番目の質問に関しては、それはタイプミスではありません。画面が768pxを下回ると、フレームワークは完全に流動的になり、任意のデバイス幅でサイズ変更され、ブレークポイントが不要になります。モバイル最適化のためにレイアウトに発生する特定の変更があるため、480pxのブレークポイントが存在します。

これを実際に見るには、彼らのサイト（ http://getbootstrap.com/examples/navbar-fixed-top/ ）でこの例に行き、768px以降のデザインをどのように扱うかを見るためにあなたのウィンドウのサイズを変更してください。

38
Lance Turri

この問題は https://github.com/twbs/bootstrap/issues/10203 - で議論されています 現在、互換性の理由からGridを変更する計画はありません。

あなたはこのフォークからブートストラップを得ることができます、ブランチhs： https://github.com/Teachnova/bootstrap/tree/hs

このブランチはあなたに480pxの追加ブレークポイントを与えるので、あなたはしなければならない：

  1. モバイル向けの設計（XS、480px未満）
  2. HTMLにHS（Horizo​​ntal 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) */
    }
}
23
Antonio Espinosa

私はこれが少し古いことを知っています、しかし私は私が貢献すると思いました。 @Sophyによる答えに基づいて、これは私が.xxsブレークポイントを追加するためにしたことです。私は、可視インライン、table.visibleなどのクラスの面倒を見ていません。

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-Push-12 {
    left: 100%;
  }
  .col-xxs-Push-11 {
    left: 91.66666667%;
  }
  .col-xxs-Push-10 {
    left: 83.33333333%;
  }
  .col-xxs-Push-9 {
    left: 75%;
  }
  .col-xxs-Push-8 {
    left: 66.66666667%;
  }
  .col-xxs-Push-7 {
    left: 58.33333333%;
  }
  .col-xxs-Push-6 {
    left: 50%;
  }
  .col-xxs-Push-5 {
    left: 41.66666667%;
  }
  .col-xxs-Push-4 {
    left: 33.33333333%;
  }
  .col-xxs-Push-3 {
    left: 25%;
  }
  .col-xxs-Push-2 {
    left: 16.66666667%;
  }
  .col-xxs-Push-1 {
    left: 8.33333333%;
  }
  .col-xxs-Push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
7
Enrico

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

6
Anthony

CSSを構築するために http://lesscss.org/ を使用すれば、これらのブレークポイントを使用できるはずです。

/* 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) {  }

からhttp://getbootstrap.com/css/#grid-media-queries

実際、@ screen-sm-minは、lessでビルドすると_variableに指定された値に置き換えられる変数です。 lessを使用しない場合は、この変数を値で置き換えることができます。

/* 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: 768px) {  }

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

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Bootstrap 3は正式にsass https://github.com/twbs/bootstrap-sass をサポートしています。もしあなたがsassを使っているなら（そしてそうすべきです）、構文は少し異なります。

/* 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) {  }
2
gagarine

これがBootstrap 4で使用されるセレクターです。 "extra small"がデフォルトなので、BS4には "最低"の設定はありません。すなわち最初にXSサイズをコーディングし、その後これらのメディアをオーバーライドするようにします。

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
1
Babbandeep Singh

@media（max-width：768px）を使うと、768pxでデザインが壊れます。しかし、767pxでも769pxでも大丈夫です。だから、私はそれが小型デバイスをターゲットにするための最大幅として767pxになると思います。

0
Xuwel Khan

ブートストラップ3の場合私は私のnavbarコンポーネントに次のコードがあります。

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

それからあなたはのようなものを使うことができます

@media wide { selector: style }

これはあなたが変数に設定した値を使用します。

エスケープを使用すると、プロパティまたは変数値として任意の文字列を使用できます。 〜 "anything"または〜 'anything'の内側にあるものはそのまま使用され、補間以外の変更はありません。

http://lesscss.org

0
Daniel