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?

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.

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

}

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.

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

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)

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

}

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

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

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

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.

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

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>

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

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/

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

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

:)

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:

• intro https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• migration https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• variables https://getbootstrap.com/docs/4.3/layout/grid/#variables

Bon codage;)

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