179

Bootstrap 3 メディア クエリのドキュメントには、次のように書かれています。

Less ファイルで次のメディア クエリを使用して、グリッド システムに主要なブレークポイントを作成します。

超小型デバイス (スマートフォン、768 ピクセル未満): 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までと言うべきではありませんか？（ドキュメントから削除されたため）

4

11 に答える 11

218

ブートストラップ 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 Mixins を介して含めることができる Sass のソース CSS を提供します。

@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) {

}

Bootstrap 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-bootstraps-media-queries

于 2015-05-30T04:21:24.380 に答える
40

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

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

より明確にする可能性のある同様の質問がここにあります: Bootstrap 3.0 Media queries

CSS では、従来のメディア クエリを使用して、Bootstrap が行っていることをオーバーライドまたは追加する必要があります。

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

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

于 2013-10-25T17:49:54.900 に答える
7

これは少し古いことは知っていますが、貢献すると思いました。@Sophy の回答に基づいて、これが .xxs ブレークポイントを追加するために行ったことです。私は、visible-inline、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) {

}
于 2016-07-02T11:46:54.730 に答える
6

480px への参照は削除されました。代わりに次のように述べています。

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

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

およびその他の mixinを使用する場合は@screen-sm-min、LESS でコンパイルする必要があります。http://getbootstrap.com/css/#grid-less を参照してください。

Bootstrap 3 と LESS の使用方法に関するチュートリアルは次のとおりです: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

于 2014-01-16T20:40:46.003 に答える
3

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

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

https://getbootstrap.com/docs/3.4/css/#grid-media-queriesから

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

/* 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) {  }
于 2017-06-26T13:34:57.463 に答える
-6 
@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}
于 2016-11-22T06:56:33.997 に答える