Twitterブートストラップ3:メディアクエリの使用方法


371

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


回答:


651

ブートストラップ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){}

更新2019-02-11:BS3情報はバージョン3.4.0でも正確です。新しいグリッド用に更新されたBS4、4.3.0で正確です。


116
ただ、FYI、これは、デバッグのために有用である可能性がある:<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>
ウィリアム・エントリケン

14
+1 は、BS3のモバイルファーストの方法論との一貫性を保ちながら、画面サイズを大きくしてクエリを並べ替えます。
Jake Berger、

5
480px(@ screen-xs)はどうですか?それは後で現れましたか?ここからだ。
brejoc 14

1
BS3との一貫性を保つために、各ビューポートごとにデフォルトの画面サイズ変数を使用してください。参照:stackoverflow.com/a/24921600/2817112
Oriol

1
@brejoc BS3 +は "mobile-first"です-"XS"(モバイル)ビューはBS3 +のデフォルトビューです...
jave.web

252

bisioの回答とBootstrap 3コードに基づいて、メディアクエリセット全体をコピーしてスタイルシートに貼り付けようとしているだけの人に、より正確な回答を導き出すことができました。

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}

ここでは高得点の回答のみmin-widthを使用していますが、あなたも使用しているmax-widthので、違いは何ですか?それは必要ですか?
shaijut

ブートストラップは、電話がポートレートモードかどうかをどのようにして知るのですか?
SuperUberDuper 2017年

@SuperUberDuperではありません。画面レイアウトではなく、ビューポートの水平サイズに応じて要素を処理します。
Chris Clower 2017年

注文はLOWからHIGHにすべきではありませんか?
囚人ZERO

134

LESSまたはSCSS / SASSを使用していて、LESS / SCSSバージョンのBootstrapを使用している場合は、変数にアクセスできれば、変数も使用できます。@ full-decentの回答の少ない翻訳は次のようになります。

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){}  /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){}  /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){}  /* deprecated: @screen-lg-desktop, or @screen-lg */

@screen-sm-maxとの変数もあります@screen-md-max。これらは、通常、@screen-md-minと1ピクセルずつ小さく@screen-lg-min、通常で使用し@media(max-width)ます。

編集:SCSS / SASSを使用している場合、変数はの$代わりにで始まる@ので、それは$screen-xs-maxなどになります


1
.grid.lessのデータを編集する場合、常にメインスタイルから上書きされます。解決策はありますか、またはメディアクエリに追加したすべてのスタイルが必要です!
edonbajrami 2014

2
これを機能させることができません。ハードコードされた数値以外のものを使用すると、コンパイラーは不平を言います。
laertiades 2014

7
@JesseGoodfellow上記の例ではLESS構文を使用しています。SASS / SCSSgithub.com/twbs/bootstrap-sass/blob/master/vendor/assets/…$screen-xs-maxを使用している場合などが必要になります(また、LESS / SCSSをローカルで使用しているが、CSSバージョンをインポートしている場合ブートストラップの場合、あなたは完全に運が悪いです。)
カーペリアム

2
@screen-tablet@screen-desktop、および@screen-lg-desktop廃止されました。すでに素晴らしい答えを更新するときかもしれません。;-)
Slipp D. Thompson 2014

2
ブートストラップを構築すると仮定します。これは答えとしてマークする必要があります
sidonaldson

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

4
これが正解です。"and"条件が必要
Jason Miller

大画面で中画面のcssのcssを使用できるようにするには、and条件を削除します。@JasonMillerなので、厳密には「必須」ではなく、テンプレートの仕様と要件によって異なります。
鬼武者2015

29

2つの例を示します。

ビューポートの幅が700px以下になると、すべてのh1タグが20pxになります。

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

ビューポートが700px以上になるまで、すべてのh1を20pxにします。

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

これが役に立てば幸い:0)


どちらの場合もタグに使用font-size: 20pxh1ます。理解を深めるためにfont-size、質問のとおりに別の方法を使用する場合があります。ところでそれはまだ大丈夫です。
fWd82 2017

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

}

これを試しました。完璧に動作します!
Tomas Gonzalez

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;
  }
}

20

Bootstrap v3.3.6以降、次のメディアクエリが使用されます。これは、利用可能なレスポンシブクラスの概要を示すドキュメントに対応しています(http://getbootstrap.com/css/#sensitive-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.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less


12

または単純なサスコンパス:

@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;
    }
}

ありがとうございました。私はブートストラップsassミックスインの例を示すものを探していました(ブートストラップ自体の例はすべてのコンテンツで複雑です)。これはたくさん説明します!:)
CleverNode、2015年

11

レスポンシブレイアウトが存在する主な理由は、テキストのスケーリングを回避することです。レスポンシブサイトの背後にあるロジック全体は、コンテンツを効果的に表示する機能的なレイアウトを作成して、複数の画面サイズで簡単に読み取って使用できるようにすることです。

テキストを拡大縮小する必要がある場合もありますが、サイトを縮小して要点を見逃さないように注意してください。

とにかく例を示します。

@media(min-width:1200px){

    h1 {font-size:34px}

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

    h1 {font-size:32px}

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

    h1 {font-size:28px}

}
@media(max-width:767px){

    h1 {font-size:26px}

}

また、ブートストラップ3では480ビューポートが削除されていることに注意してください。


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

Bootstrapも参照してください


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>


2

これは、メディアクエリに基づいて個別の応答ファイルを含む、さらに簡単なワンストップソリューションです。

これにより、すべてのメディアクエリロジックとインクルードロジックが1つのページ(ローダー)に存在するだけで済みます。また、メディアクエリがレスポンシブスタイルシート自体を混乱させないようにすることもできます。

//loader.less

// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';

/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here.  When you need a larger screen override, move those     
* overrides to one of the responsive files below
*/
@import 'base.less';

/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)

base.lessは次のようになります

/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
  background-color: @fadedblue;
}

sm-min.lessは次のようになります

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

あなたのインデックスは単にローダーをロードする必要があります。

<link rel="stylesheet/less" type="text/css" href="loader.less" />

かんたん


こんにちは、ブートストラップで2日間の使用量を減らしようとしていますが、それでも試しています。Windowsでの使用を減らすために私を助けてください。たくさんのタットや記事を読みましたが、適切な解決策が見つかりませんでした。よろしく
お願いします

少ないJavaScriptライブラリを含めることを確認する必要があります。そうすると、アプリケーションはそれらのファイルをどう処理するかを認識します。アプリケーションに含める量を少なくするかどうかはあなた次第です。アセット経由でgithubにあるライブラリを使用します。あなたはそれをする必要はありません。JavaScriptファイルを含めるだけで、標準のCSSスタイルのメタタグを介してLessファイルをロードできます。コンパイルについて心配する必要はありません。その情報はこちらです。lesscss.org/#client-side-usage
blamb

2

ブートストラップは、レイアウト、グリッドシステム、およびコンポーネントのソースSassファイルで、主に次のメディアクエリ範囲(またはブレークポイント)を使用します。

非常に小さいデバイス(ポートレート電話、576px未満)xsこれはブートストラップのデフォルトであるため、メディアクエリはありません。

小型デバイス(横長の携帯電話、576px以上)

@media (min-width: 576px) { ... }

中型デバイス(タブレット、768px以上)

@media (min-width: 768px) { ... }

大型デバイス(デスクトップ、992px以上)

@media (min-width: 992px) { ... }

超大型デバイス(大型デスクトップ、1200px以上)

@media (min-width: 1200px) { ... }

ソースCSSはSassで記述しているため、すべてのメディアクエリはSassミックスイン経由で利用できます。

xsブレークポイントは効果的であるため、メディアクエリは不要 @media (min-width: 0) { ... }

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

それを深く理解するために、リンクの下を通過してください

https://getbootstrap.com/docs/4.3/layout/overview/


1

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

@media(最小幅:768ピクセル)および(最大幅:991ピクセル){}

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


0

IEのメディアクエリを使用します。

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

0

:)

最新のブートストラップ(4.3.1)では、SCSS(SASS)を使用して、@ mixinのいずれかを使用できます /bootstrap/scss/mixins/_breakpoints.scss

少なくとも最小ブレークポイント幅のメディア。最小のブレークポイントに対するクエリはありません。@contentを指定されたブレークポイント以上に適用します。

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

最大ブレークポイント幅のメディア。最大のブレークポイントのクエリはありません。@contentを指定したブレークポイント以下に適用します。

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

複数のブレークポイント幅にまたがるメディア。@コンテンツを最小ブレークポイントと最大ブレークポイントの間に適用します

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)

ブレークポイントの最小幅と最大幅の間のメディア。最小のブレークポイントには最小値はなく、最大のブレークポイントには最大値はありません。@contentを特定のブレークポイントにのみ適用し、ビューポートの幅を狭くしたり狭めたりしないようにします。

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

例えば:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

ドキュメンテーション:

幸せなコーディング;)


-1

主な反応を改善するには:

あなたが使用できるメディアの属性<link>タグをダウンロードだけで、コードのユーザーのニーズにために(それはメディアクエリをサポート)。

<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

これにより、メディア属性に関係なく、ブラウザーはすべてのCSSリソースをダウンロードします。 違いは、メディア属性のメディアクエリがfalseと評価され場合、その.cssファイルとそのコンテンツはレンダリングをブロックしないことです。

したがって、メディア属性を使用することをお勧めします<link>より良いユーザーエクスペリエンスを保証するためタグで。

ここでは、この問題に関するGoogleの記事を読むことができます https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

メディアクエリに応じて、CSSコードをさまざまなファイルに自動分離するのに役立ついくつかのツール

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.