web-dev-qa-db-ja.com

Bootstrap 4-メディアクエリミックスインの使用方法

メディアブレークポイントを設定するにはどうすれば中から大としましょう-最小ミックスインと最大ミックスインをネストするか、どうすればよいですか？.

後の出力は、@ media（min-width：480px）および（max-width：767px）ブレークポイントミックスインを使用したものです。

twitter-bootstrapsass
19
user1678736

media-breakpoint-between($lower, $upper)を使用します

依存関係

ミックスインは_mixins/_breakpoints.scss_で宣言され、__variables.scss_にある$ grid-breakpointsマップに依存します。

例

ブレークポイントマップ：

_$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) 
_

混合：

_@include media-breakpoint-between(sm, md) {
    // your code
}
_

コンパイル先

_@media (min-width: 576px) and (max-width: 991px) {}
_

重要なお知らせ

ミックスインのメディアブレークポイント間は、宣言されたブレークポイントの「下限」値と「上限」値を使用します。

  • ブレークポイントの「低い」値は、$ grid-breakpointマップで宣言された値です。

  • 特定のブレークポイントの「上限」値は、より高いブレークポイントの値から1pxを引いた値に等しくなります。

上下のブレークポイント値の例（ベースod $ grid-breakpoint map）

_Lower value of md is equal to 576
Upper value of md is equal to 991 ( value of next breakpoint (lg) minus 1px (992px-1px)
_

その他のメディアミックスイン

@include media-breakpoint-up(sm) {}は、_$sm_の最小幅のブレークポイントを作成します。

@include media-breakpoint-down(md) {}は、最大幅_$md_のブレークポイントを作成します。

41
Edd

Mixin media-breakpoint-between($lower, $upper)もここにあります

だからこれは動作するはずです

@include media-breakpoint-between(sm, md){
  // this applies only between the sm and ms breakpoints 
}
4
ondrejruzicka

2つのクラスのコンボを行います。 （また、BS4はpxではなくremsを使用します。）

例...（From： http://codepen.io/j_holtslander/pen/jbEGWb ）

<!-- Jay's Viewport Helper -->
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
  <span class="hidden-sm-up">SIZE XS</span>
  <span class="hidden-xs-down hidden-md-up">SIZE SM</span>
  <span class="hidden-sm-down hidden-lg-up">SIZE MD</span>
  <span class="hidden-md-down hidden-xl-up">SIZE LG</span>
  <span class="hidden-lg-down">SIZE XL</span>
</div>
<!-- /Jay's Viewport Helper -->
1
Jay