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

371

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

Rui
la source
7
google "media queries" puis vérifiez comment bootstrap les a mis en place
koala_dev

Réponses:

651

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

Remarque: pour info, 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 "très petit" est la valeur par défaut. C'est-à-dire que vous devez d'abord coder la taille XS, puis avoir ces remplacements de supports par la suite.

@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 mise à jour pour la nouvelle grille, précise à partir de 4.3.0.

William Entriken
la source
116
Juste pour info, 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>
William Entriken
14
+1 pour commander des requêtes en augmentant la taille des écrans, tout en restant cohérent avec la méthodologie mobile-first de BS3.
Jake Berger
5
Et 480px (@ screen-xs)? Cela est-il apparu plus tard? Je l'ai d' ici .
brejoc
1
Pour être cohérent avec BS3, utilisez les variables de taille d'écran par défaut pour chaque fenêtre. Voir: stackoverflow.com/a/24921600/2817112
Oriol
1
@brejoc BS3 + est "mobile-first" - la vue "XS" (mobile) est la vue par défaut dans BS3 + ...
jave.web
252

Sur la base de la réponse de bisio et du code Bootstrap 3, j'ai pu trouver une réponse plus précise pour tous ceux qui souhaitent simplement copier et coller l'ensemble complet de requêtes multimédias dans leur 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) {

}
Chris Clower
la source
Ici, la réponse à vote élevé utilise uniquement min-width, mais vous l'avez max-widthégalement utilisée , alors quelle est la différence?, Est-ce nécessaire?
shaijut
Comment bootstrap sait-il si le téléphone est en mode portrait?
SuperUberDuper
@SuperUberDuper ce n'est pas le cas. Il traite uniquement les éléments en fonction de la taille horizontale de la fenêtre d'affichage plutôt que de la disposition de l'écran.
Chris Clower
La commande ne doit-elle pas être de FAIBLE à ÉLEVÉE?
Prisonnier ZERO
134

Si vous utilisez LESS ou SCSS / SASS et que vous utilisez une version LESS / SCSS de Bootstrap, vous pouvez également utiliser des variables , à condition d'y avoir 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-maxet @screen-md-max, qui sont 1 pixel de moins que @screen-md-minet @screen-lg-min, généralement, pour une utilisation avec@media(max-width) .

EDIT: Si vous utilisez SCSS / SASS, les variables commencent par un $au lieu d'un @, ce serait donc $screen-xs-maxetc.

carpeliam
la source
1
Lorsque je souhaite modifier des données sur .grid.less, il est toujours remplacé par le style principal. Y a-t-il une solution ou j'ai juste besoin de tout le style que j'ai ajouté dans les requêtes média pour ajouter! Important?
edonbajrami
2
Je n'arrive pas à faire fonctionner ça. Le compilateur se plaint si j'utilise autre chose qu'un numéro codé en dur.
laertiades
7
@JesseGoodfellow l'exemple ci-dessus utilise la syntaxe LESS; si vous utilisez SASS / SCSS github.com/twbs/bootstrap-sass/blob/master/vendor/assets/… , vous voudrez $screen-xs-maxetc. (et si vous utilisez LESS / SCSS localement mais en important la version CSS de Bootstrap, vous n'avez pas de chance.)
carpeliam
2
@screen-tablet, @screen-desktopEt @screen-lg-desktopont été désapprouvée. Il serait peut-être temps de mettre à jour votre réponse déjà impressionnante. ;-)
Slipp D. Thompson
2
En supposant que vous construisiez bootstrap; cela devrait être marqué comme la réponse
sidonaldson
44

Ce sont 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){}
shlomia
la source
4
Ceci est la bonne réponse. Doit avoir des conditions "et"
Jason Miller
Pour permettre aux grands écrans d'utiliser le css à partir du css d'écran moyen, supprimez les andconditions. @JasonMiller donc ce n'est pas exactement un "must", cela dépend des spécifications et des exigences du modèle.
Onimusha
29

Voici deux exemples.

Une fois que la fenêtre devient large ou inférieure à 700 pixels, faites toutes les balises h1 à 20 pixels.

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

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

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

J'espère que cela aide: 0)

Jeffpowrs
la source
Vous utilisez font-size: 20pxpour les h1balises dans les deux cas. Pour une meilleure compréhension, vous pouvez avoir une utilisation différente font-sizecomme demandé en question. BTW Ça va toujours.
fWd82
21

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

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

}
internet-nico
la source
J'ai essayé ça. Marche parfaitement!
Tomas Gonzalez
21

Sur la base des 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;
  }
}

Production

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}
merde
la source
20

Depuis Bootstrap v3.3.6, les requêtes multimédias suivantes sont utilisées, ce qui correspond à la documentation qui décrit 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) {}

Requêtes multimédias extraites du référentiel Bootstrap GitHub à partir des fichiers less suivants: -

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

Suleman C
la source
12

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;
    }
}
user956584
la source
Je vous remercie. Je cherchais quelque chose qui donne des exemples du mixin bootstrap sass (le propre exemple de bootstrap est compliqué avec tout le contenu). Cela explique beaucoup de choses! :)
CleverNode
11

gardez à l'esprit qu'éviter la mise à l'échelle du texte est la principale raison pour laquelle les mises en page réactives existent. toute la logique derrière les sites réactifs est de 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 mettre le texte à l'échelle dans certains cas, veillez à ne pas miniaturiser votre site et à ne pas rater le sujet.

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

}

Gardez également à l'esprit que la fenêtre 480 a été supprimée dans le bootstrap 3.

Joshua Watson
la source
6

Nous utilisons les requêtes multimédias 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

csehasib
la source
5

vous pouvez voir dans mon exemple 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>

Ganesh Putta
la source
2

Voici une solution à guichet unique encore plus simple, comprenant des fichiers réactifs distincts basés sur des requêtes multimédias.

Cela permet à toute la logique de requête multimédia et à la logique d'exister de n'avoir qu'une seule page, le chargeur. Cela permet également de ne pas encombrer les requêtes multimédias 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 aurait juste à charger le loader.less

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

peasy facile..

blamb
la source
Salut, j'essaie d'utiliser moins de 2 jours en bootstrap mais j'essaie toujours. voulez-vous s'il vous plaît m'aider en ce qui concerne moins d'utilisation sur Windows. j'ai lu beaucoup d'articles et d'articles mais je n'ai pas trouvé de solutions appropriées je pense que vous pouvez m'aider. Merci d'avance
Muddasir Abbas
vous devez vous assurer que vous incluez la bibliothèque moins javascript, votre application saura quoi faire avec ces fichiers. la façon dont vous incluez moins dans votre demande dépend de vous. j'utilise une bibliothèque trouvée sur github, via assetic. vous n'avez pas à faire ça. vous pouvez simplement inclure le fichier javascript, puis charger votre fichier less via une balise meta de style css standard. vous ne vous inquiétez pas de la compilation. cette information est ici. lesscss.org/#client-side-usage .
blamb
2

Bootstrap utilise principalement les plages de requêtes multimédias ou points d'arrêt suivants dans nos fichiers Sass source pour notre présentation, notre système de grille et nos composants.

Petits appareils (téléphones portrait, moins de 576 pixels) Pas de requête multimédia xscar il s'agit de la valeur par défaut dans Bootstrap

Petits appareils (téléphones paysage, 576px et plus)

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

Appareils moyens (tablettes, 768 pixels et plus)

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

Grands appareils (ordinateurs de bureau, 992 pixels et plus)

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

Appareils très grands (grands ordinateurs de bureau, 1 200 pixels et plus)

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

Puisque nous écrivons notre CSS source dans Sass, toutes nos requêtes média sont disponibles via les mixins Sass:

Aucune requête multimédia nécessaire pour le point d'arrêt xs car il est efficace @media (min-width: 0) { ... }

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

Pour le comprendre profondément, veuillez consulter le lien ci-dessous

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

Purvi Barot
la source
1

Écran @media uniquement et (largeur maximale: 1200 px) {}

Écran @media uniquement et (largeur maximale: 979 pixels) {}

Écran @media uniquement et (largeur maximale: 767 pixels) {}

Écran @media uniquement et (largeur maximale: 480 pixels) {}

Écran @media uniquement et (largeur maximale: 320 pixels) {}

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

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

Ashu Designer
la source
0

Utilisez les requêtes média 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) {
}
Apps Tawale
la source
0

:)

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. Rend le @content applicable au point d'arrêt donné et plus large.

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

Support d'au plus la largeur maximale du point d'arrêt. Aucune requête pour le plus grand point d'arrêt. Rend le @content applicable au point d'arrêt donné et plus étroit.

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

Média couvrant plusieurs largeurs de point d'arrêt. Rend le @content appliqué entre les points d'arrêt min et max

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

Média entre les largeurs minimale et maximale du point d'arrêt. Pas de minimum pour le plus petit point d'arrêt et pas de maximum pour le plus grand. Fait que le @content s'applique uniquement au point d'arrêt donné, et non aux fenêtres 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:

Bon codage;)

Luckylooke
la source
-1

Pour améliorer la réponse principale:

Vous pouvez utiliser l' attribut media de la <link>balise (il prend en charge les requêtes média) afin de télécharger uniquement le code dont l'utilisateur a besoin.

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

Avec cela, le navigateur télécharge toutes les ressources CSS, quel que soit l' attribut média . La différence est que si la requête multimédia de l'attribut multimédia est évaluée à false, ce fichier .css et son contenu ne seront pas bloqués au rendu.

Par conséquent, il est recommandé d'utiliser l' attribut media dans le<link> balise car il garantit une meilleure expérience utilisateur.

Ici, vous pouvez lire un article Google sur ce problème https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Quelques outils qui vous aideront à automatiser la séparation de votre code CSS dans différents fichiers en fonction de vos requêtes multimédias

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

Juanma Menendez
la source