Une brève introduction à la conception de mise en page réactive pour le développement Web mobile jQuery_jquery

La conception de mise en page réactive est une conception qui répond à l'appareil utilisateur en fonction de la résolution d'écran de l'appareil utilisateur. Cela signifie que si un utilisateur parcourt une page Web sur un appareil mobile, une tablette ou un ordinateur de bureau, la conception répondra de manière appropriée à l'appareil en affichant une mise en page spécifique basée sur la résolution d'écran de cet appareil.

La documentation du framework utilise en fait une combinaison du framework jQuery Mobile et des requêtes multimédias CSS3 pour implémenter sa propre conception réactive. Comment il réagit aux différentes résolutions d'écran.

Sans styles personnalisés, notre grille sera une disposition à 3 colonnes sur toutes les largeurs d'écran :

Dans notre style personnalisé, nous souhaitons que cette grille recouvre la largeur étroite, puis passe à une disposition standard à 3 colonnes. Sur des largeurs d'écran très larges, nous voulons que la première colonne occupe 50 % de la largeur, comme ceci :

Pour y parvenir, nous devons personnaliser un nouveau nom de classe, tel que "my-breakpoint".
Cette classe est utilisée pour les styles étendus dans les requêtes multimédias personnalisées, elles ne seront appliquées que lorsque cette classe est ajoutée à un conteneur de grille. Pour les packages de requêtes multimédias, nous souhaitons uniquement des styles de 50 em appliquant les conditions suivantes.
Dans vos requêtes multimédias, utilisez des unités EM au lieu de pixels pour garantir que la requête multimédia prend en compte la taille de la police en plus de la largeur de l'écran. Pour calculer la largeur de l'écran EMS, ajoutez 16 pixels à la largeur cible, qui correspond à la taille de police par défaut pour le corps.

Partie HTML5 :

<div class="ui-grid-b my-breakpoint">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

Partie CSS3 :

@media all and (max-width: 50em) {
 .my-breakpoint .ui-block-a, 
 .my-breakpoint .ui-block-b, 
 .my-breakpoint .ui-block-c,
 .my-breakpoint .ui-block-d,
 .my-breakpoint .ui-block-e { 
  width: 100%; 
  float:none; 
 }
}

Dans cette requête multimédia, nous définissons la largeur à 100 % et annulons l'attribut float à une largeur d'écran de 50 em. Ces règles s'appliquent à chaque type de grille en empilant les grilles de sélection de toutes les classes de styles ui-block-a à ui-block-e.
Cela rend la grille réactive et ajoute des règles de style supplémentaires pour faciliter chaque changement de point d'arrêt. Nous vous encourageons à créer autant de points d’arrêt personnalisés que nécessaire en fonction de vos besoins uniques en matière de contenu et de mise en page.

Ajouter un point d'arrêt grand écran pour ajuster le rapport

Sur la base de l'exemple ci-dessus, nous pouvons ajouter un point d'arrêt supplémentaire pour définir la largeur de sorte que la première colonne ait une largeur de 50 % et les deux autres 25 % au-dessus de 75em (1 200 pixels) par des requêtes multimédias supplémentaires de largeur minimale pour ajuster la width Juste comme ça dans un style personnalisé :

@media all and (min-width: 75em) {
 .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
 .my-breakpoint.ui-grid-b .ui-block-b, 
 .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
 .my-breakpoint.ui-grid-b .ui-block-a { clear: left; }
 }
} 

REMARQUE : Un paramètre de largeur légèrement plus étroit est requis pour résoudre les problèmes d'arrondi sur toutes les plates-formes.

Appliquer un point d'arrêt personnalisé réactif à l'interface utilisateur

À l'aide de ce point d'arrêt par défaut, ajoutez la classe réactive à l'interface utilisateur au conteneur de grille, ce qui rendra la pile en dessous de 560 px (35 em). Si ce point d'arrêt ne fonctionne pas pour votre contenu, nous vous encourageons à écrire un point d'arrêt personnalisé comme décrit ci-dessus.

<div class=" ui-grid-b ui-responsive ">

Ce sont des grilles standards qui sont des conteneurs de grilles de classes responsive créés par ui-responsive (réponse d'interface, classe personnalisée, my-breakpoint dans l'exemple ci-dessus)

Exemple :

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>responsive-grid demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <style>
  @media all and (max-width: 35em) {
  .my-breakpoint .ui-block-a, 
  .my-breakpoint .ui-block-b, 
  .my-breakpoint .ui-block-c,
  .my-breakpoint .ui-block-d,
  .my-breakpoint .ui-block-e { 
   width: 100%; 
   float:none; 
  }
 }
 
 @media all and (min-width: 45em) {
  .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
  .my-breakpoint.ui-grid-b .ui-block-b, 
  .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
 }
 </style>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Responsive Grid Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-b my-breakpoint">
   <div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
   <div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
   <div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
  </div>
</div>
 
</body>
</html>