Bootstrap 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>
BS4で使われているセレクターはここにあります。 "extra small"がデフォルトであるため、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の時点で正確。
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) {
}
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
と@screen-lg-min
よりそれぞれ1ピクセル少なく、通常は@media(max-width)
で使用します。
編集:あなたがSCSS/SASSを使っているなら、 変数 は$
の代わりに@
で始まるので、$screen-xs-max
のようになります。
これらは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){}
これが2つの例です。
ビューポートの幅が700ピクセル以下になったら、すべてのh1タグを20ピクセルにします。
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
ビューポートが700ピクセル以上になるまで、すべてのh1を20ピクセルにします。
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
これが役立つことを願っています:0)
これは、より少ないファイルをインポートせずにブートストラップを模倣するためにLESSを使用する、よりモジュール化された例です。
@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) {
}
Bootstrap v3.3.6以降では、利用可能なレスポンシブクラスの概要を説明したドキュメント( http://getbootstrap.com/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.3.6/less/responsive-utilities.lesshttps://github.com/twbs/bootstrap/blob/v3.3.6/less /variables.less
他のユーザーの回答に基づいて、私は使いやすくするためにこれらのカスタムミックスインを書きました。
.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;
});
}
@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;
}
}
@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;
}
}
レスポンシブレイアウトが存在する主な理由は、テキストの拡大縮小を回避することです。レスポンシブサイトの背後にあるロジック全体は、コンテンツを効果的に表示する機能的なレイアウトを作成して、読みやすく、複数の画面サイズで使用できるようにすることです。
場合によってはテキストを拡大縮小する必要がありますが、あなたのサイトをミニチュアにしないでポイントを見逃さないように注意してください。
とにかく例を挙げます。
@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ビューポートが削除されています。
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) { ... }
ブートストラップ も参照してください。
あなたは私の例で見ることができますフォントサイズと背景色はスクリーンサイズに従って変化しています
<!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>
これは、メディアクエリに基づいた個別の応答ファイルを含む、さらに簡単なワンストップソリューションです。
これにより、すべてのメディアクエリロジックとインクルードロジックが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;
}
あなたのインデックスはただloader.lessをロードする必要があるでしょう
<link rel="stylesheet/less" type="text/css" href="loader.less" />
簡単です。
@メディアのみの画面と(最大幅:1200ピクセル){}
@メディアのみの画面と(最大幅:979ピクセル){}
@メディアのみの画面と(最大幅:767ピクセル){}
@メディアのみの画面と(最大幅:480ピクセル){}
@メディアのみの画面と(最大幅:320ピクセル){}
@media(最小幅:768ピクセル)および(最大幅:991ピクセル){}
@media(最小幅:992ピクセル)および(最大幅:1024ピクセル){}
:)
最新のブートストラップ(4.3.1)では、SCSS(SASS)を使って/bootstrap/scss/mixins/_breakpoints.scss
から@mixinのいずれかを使うことができます。
少なくとも最小ブレークポイント幅のメディア。最小のブレークポイントを照会しません。 @contentを指定されたブレークポイント以上に適用します。
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
最大ブレークポイント幅以下のメディア。最大のブレークポイントを照会しません。 @contentを指定されたブレークポイントに適用し、幅を狭くします。
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
複数のブレークポイント幅にまたがるメディア。 @contentを最小ブレークポイントと最大ブレークポイントの間に適用します。
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
ブレークポイントの最小幅と最大幅の間のメディア。最小のブレークポイントに最小、最大のブレークポイントに最大はありません。 @コンテンツを指定されたブレークポイントにのみ適用し、ビューポートの幅を広げたり狭めたりしません。
@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;
}
}
ドキュメンテーション:
ハッピーコーディング;)
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) {
}