386

Bootstrap 3 を使用して、画面サイズに応じていくつかのフォント サイズを調整したいレスポンシブ レイアウトを構築しています。メディア クエリを使用してこの種のロジックを作成するにはどうすればよいですか?

4

18 に答える 18

669

ブートストラップ 3

一貫性を保ちたい場合は、BS3 で使用されるセレクターを次に示します。

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

注: 参考までに、これはデバッグに役立つ場合があります。

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

ブートストラップ 4

BS4 で使用されるセレクターは次のとおりです。「極小」がデフォルトであるため、BS4 には「最低」の設定はありません。つまり、最初に XS サイズをコーディングしてから、後でこれらのメディアをオーバーライドします。

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

ブートストラップ 5

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}

2021 年 5 月 20 日更新: 情報はバージョン 3.4.1、4.6.0、5.0.0 の時点でも正確です。

于 2013-09-17T13:08:54.097 に答える
44

Bootstrap3 の値は次のとおりです。

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}
于 2014-01-09T10:23:10.513 に答える
22

ブートストラップ 3

Bootstrap 3 (v3.4.1) の最終バージョン リリースでは、次のメディア クエリが使用されました。これは、利用可能なレスポンシブ クラスの概要を説明するドキュメントに対応しています。 https://getbootstrap.com/docs/3.4/css/#responsive-utilities

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}

Bootstrap GitHub リポジトリから以下のファイルから抽出されたメディア クエリ:-

https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less#L283 https://github.com/twbs/bootstrap/blob/v3.4.1/less/responsive-utilities.less

ブートストラップ 5

バージョン 5 のドキュメントから、メディア クエリのブレークポイントが最新のデバイスのサイズにより適合するようにバージョン 3 以降に更新されていることがわかります。

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` 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) { ... }

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

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

出典: Bootstrap 5 ドキュメント

Bootstrap GitHub リポジトリで v5.1.3 のブレークポイントを確認できます。

https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L461 https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_breakpoints.scss

2021-12-19 更新

于 2014-08-16T07:01:40.367 に答える
21

他のユーザーの回答に基づいて、これらのカスタム ミックスインを簡単に使用できるように作成しました。

入力が少ない

.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }

使用例

body {
  .when-lg({
    background-color: red;
  });
}

SCSS 入力

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

使用例:

body {
  @include when-md {
    background-color: red;
  }
}

出力

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}
于 2016-03-09T10:27:56.383 に答える
21

以下は、より少ないファイルをインポートせずに、LESS を使用して Bootstrap を模倣する、よりモジュール化された例です。

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;

//xs only
@media(max-width: @screen-xs-max) {

}
//small and up
@media(min-width: @screen-sm-min) {

}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

}
//md and up
@media(min-width: @screen-md-min) {

}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {

}
//lg and up
@media(min-width: @screen-lg-min) {

}
于 2014-10-16T05:06:38.253 に答える
12

または単純な Sass-Compass:

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

例：

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}
于 2015-01-04T22:26:07.233 に答える
6

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

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

ブートストラップも参照

于 2014-06-29T08:33:34.217 に答える
5

私の例では、画面サイズに応じてフォントサイズと背景色が変化していることがわかります

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: lightgreen;
}
/* Custom, iPhone Retina */ 
@media(max-width:320px){
    body {
        background-color: lime;
        font-size:14px;
     }
}
@media only screen and (min-width : 320px) {
     body {
        background-color: red;
        font-size:18px;
    }
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
     body {
        background-color: aqua;
        font-size:24px;
    }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
     body {
        background-color: green;
        font-size:30px;
    }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
     body {
        background-color: grey;
        font-size:34px;
    }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
     body {
        background-color: black;
        font-size:42px;
    }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>

于 2016-07-20T10:06:21.333 に答える
1

@media のみの画面と (最大幅: 1200px) {}

@media のみの画面と (最大幅: 979px) {}

@media のみの画面と (最大幅: 767px) {}

@media のみの画面と (最大幅: 480px) {}

@media のみの画面と (最大幅: 320px) {}

@media (最小幅: 768px) および (最大幅: 991px) {}

@media (最小幅: 992px) および (最大幅: 1024px) {}

于 2016-02-10T12:03:04.630 に答える