web-dev-qa-db-fra.com

Twitter Bootstrap 3: comment utiliser les requêtes multimédia?

J'utilise Bootstrap 3 pour créer une présentation réactive dans laquelle je souhaite ajuster quelques tailles de police en fonction de la taille de l'écran. Comment utiliser les requêtes des médias pour créer ce type de logique?

css3twitter-bootstrapmedia-queries
365
Rui

Bootstrap 3

Voici les sélecteurs utilisés dans BS3, si vous voulez rester cohérent:

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

Note: Pour votre information, cela peut être utile pour le débogage:

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

Bootstrap 4

Voici les sélecteurs utilisés dans BS4. Il n'y a pas de paramètre "le plus bas" dans BS4 car "extra petit" est la valeur par défaut. Autrement dit, vous coderiez d'abord la taille du fichier XS, puis les remplacements de média suivants.

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

Mise à jour 2019-02-11: Les informations BS3 sont toujours exactes à partir de la version 3.4.0, BS4 a été mise à jour pour la nouvelle grille, à partir de la version 4.3.0.

640
William Entriken

Sur la base de la réponse de bisio et du code Bootstrap 3, j'ai été en mesure de fournir une réponse plus précise à quiconque souhaitait simplement copier et coller l'ensemble de la requête multimédia dans sa feuille de style:

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

}
251
Chris Clower

Si vous utilisez LESS ou SCSS/SASS et que vous utilisez une version de Bootstrap LESS/SCSS, vous pouvez également utiliser variables , à condition que vous y ayez accès. Une traduction MOINS de la réponse de @ full-decent serait la suivante:

@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 */

Il existe également des variables pour @screen-sm-max et @screen-md-max, qui sont respectivement inférieures de 1 pixel à @screen-md-min et @screen-lg-min, généralement destinées à être utilisées avec @media(max-width).

EDIT: Si vous utilisez SCSS/SASS, variables commence par un $ au lieu d'un @, donc $screen-xs-max etc.

134
carpeliam

Voici les valeurs de 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){}
44
shlomia

Voici deux exemples.

Une fois que la fenêtre a atteint 700 pixels de large ou moins, toutes les balises h1 deviennent 20 pixels.

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

Faites tous les 20px du h1 jusqu'à ce que la fenêtre atteigne 700px ou plus.

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

J'espère que cela aide: 0)

29
Jeffpowrs

Voici un exemple plus modulaire utilisant LESS pour imiter Bootstrap sans importer les fichiers moins.

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

}
20
internet-nico

À partir de Bootstrap v3.3.6, les requêtes de support suivantes sont utilisées. Elles correspondent à la documentation décrivant les classes réactives disponibles ( 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) {}

Les requêtes multimédia extraites du référentiel GitHub Bootstrap _ des fichiers moins suivants: -

https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.lesshttps://github.com/twbs/bootstrap/blob/ v3.3.6/moins/variables.less

20
Suleman C

Basé sur les réponses des autres utilisateurs, j'ai écrit ces mixins personnalisés pour une utilisation plus facile:

Moins d'entrée

.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(); } }

Exemple d'utilisation

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

Entrée 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; } }

Exemple d'utilisation:

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

Sortie

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}
19
damd

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

Exemple:

#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;
    }
}
12
user956584

gardez à l'esprit qu'empêcher la mise à l'échelle du texte est la raison principale pour laquelle les dispositions réactives existent. Toute la logique derrière les sites responsive consiste à créer des mises en page fonctionnelles qui affichent efficacement votre contenu afin qu'il soit facilement lisible et utilisable sur plusieurs tailles d'écran.

Bien qu'il soit nécessaire de redimensionner le texte dans certains cas, veillez à ne pas miniaturiser votre site et ne ratez rien.

heres un exemple de toute façon.

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

}

N'oubliez pas non plus que la fenêtre 480 a été supprimée dans bootstrap 3.

11
Joshua Watson

Nous utilisons les requêtes de média suivantes dans nos fichiers Less pour créer les points d'arrêt clés dans notre système de grille.

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

voir aussi sur Bootstrap

5
csehasib

vous pouvez voir dans mon exemple que les tailles de police et les couleurs d'arrière-plan changent en fonction de la taille de l'écran

<!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>
4
Ganesh Putta

Voici une solution unique encore plus simple, comprenant des fichiers réactifs séparés basés sur des requêtes de support.

Cela permet à toute la logique d'interrogation de média et d'inclure la logique de n'exister que sur une seule page, le chargeur. Cela permet également de ne pas encombrer les requêtes médiatiques des feuilles de style réactives elles-mêmes.

//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 ressemblerait à ceci

/**
* 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 ressemblerait à ceci

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

votre index devrait simplement charger le loader.less

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

peasy facile..

2
blamb

Écran @média uniquement et (largeur maximale: 1200px) {}

Écran @média uniquement et (largeur maximale: 979px) {}

Écran @média uniquement et (largeur maximale: 767px) {}

Écran @média uniquement et (largeur maximale: 480px) {}

Écran @média uniquement et (largeur maximale: 320 pixels) {}

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

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

1
Ashu Designer

:)

Dans le dernier bootstrap (4.3.1), en utilisant SCSS (SASS), vous pouvez utiliser l'un des @mixin de /bootstrap/scss/mixins/_breakpoints.scss

Support d'au moins la largeur minimale du point d'arrêt. Aucune requête pour le plus petit point d'arrêt. Fait que le @content s'applique au point d'arrêt donné et plus large.

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

Support de maximum la largeur maximale du point d'arrêt. Aucune requête pour le plus grand point d'arrêt. Fait en sorte que le @ contenu soit appliqué au point d'arrêt donné et plus étroit.

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

Média couvrant plusieurs largeurs de points d'arrêt. Fait que le contenu @ s'applique entre les points d'arrêt min et max

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

Média compris entre les largeurs minimale et maximale du point d'arrêt. Pas de minimum pour le plus petit point d'arrêt, ni de maximum pour le plus grand. Fait en sorte que le @ contenu ne s'applique qu'au point d'arrêt donné, et non aux fenêtres d'affichage, qu'elles soient plus larges ou plus étroites.

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

Par exemple:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

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

Documentation:

Bonne codage;)

0
Luckylooke

Utilisez les requêtes de médias pour 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
Apps Tawale