Eine kurze Einführung in das responsive Layout-Design für jQuery Mobile Web Development_jquery

Responsives Layout-Design ist ein Design, das entsprechend der Bildschirmauflösung des Benutzergeräts auf das Benutzergerät reagiert. Dies bedeutet, dass das Design unabhängig davon, ob ein Benutzer eine Webseite auf einem Mobil-, Tablet- oder Desktop-Gerät durchsucht, entsprechend auf das Gerät reagiert, indem ein bestimmtes Layout basierend auf der Bildschirmauflösung dieses Geräts angezeigt wird.

Die Dokumentation des Frameworks verwendet tatsächlich eine Kombination aus dem jQuery Mobile-Framework und CSS3-Medienabfragen, um sein eigenes responsives Design zu implementieren. Wie es auf unterschiedliche Bildschirmauflösungen reagiert.

Ohne benutzerdefinierte Stile wird unser Raster über alle Bildschirmbreiten hinweg ein 3-Spalten-Layout sein:

In unserem benutzerdefinierten Stil möchten wir, dass dieses Raster die schmale Breite überlagert und dann zu einem standardmäßigen 3-Spalten-Layout wechselt. Bei sehr großen Bildschirmbreiten möchten wir, dass die erste Spalte 50 % der Breite einnimmt, etwa so:

Um dies zu erreichen, müssen wir einen neuen Klassennamen anpassen, z. B. „my-breakpoint“.
Diese Klasse wird für bereichsbezogene Stile in benutzerdefinierten Medienabfragen verwendet. Sie werden nur angewendet, wenn diese Klasse einem Rastercontainer hinzugefügt wird. Für Medienabfragepakete möchten wir nur 50em-Stile unter Anwendung der folgenden Bedingungen.
Verwenden Sie in Ihren Medienabfragen EM-Einheiten anstelle von Pixeln, um sicherzustellen, dass die Medienabfrage zusätzlich zur Bildschirmbreite auch die Schriftgröße berücksichtigt. Um die EMS-Bildschirmbreite zu berechnen, addieren Sie 16 Pixel zur Zielbreite, der Standardschriftgröße für den Textkörper.

HTML5-Teil:

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

CSS3-Teil:

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

In dieser Medienabfrage setzen wir die Breite auf 100 % und negieren das Float-Attribut auf 50em Bildschirmbreite. Diese Regeln gelten für jeden Rastertyp, indem Auswahlgitter aller Klassen ui-block-a bis ui-block-e gestapelt werden.
Dadurch wird das Raster reaktionsfähig und es werden zusätzliche Stilregeln hinzugefügt, um jede Haltepunktänderung einfacher zu machen. Wir empfehlen Ihnen, basierend auf Ihren individuellen Inhalts- und Layoutanforderungen so viele benutzerdefinierte Haltepunkte zu erstellen, wie Sie benötigen.

Fügen Sie einen Breitbild-Haltepunkt hinzu, um das Verhältnis anzupassen

Basierend auf dem obigen Beispiel können wir einen zusätzlichen Haltepunkt hinzufügen, um die Breite so festzulegen, dass die erste Spalte 50 % breit ist und die anderen beiden 25 % über 75em (1200 Pixel), indem wir zusätzliche Medienabfragen mit minimaler Breite anpassen Breite Genau so im benutzerdefinierten Stil:

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

HINWEIS: Eine etwas engere Breiteneinstellung ist erforderlich, um Rundungsprobleme plattformübergreifend zu beheben.

Benutzerdefinierten UI-responsiven Haltepunkt anwenden

Fügen Sie mithilfe dieses Standard-Haltepunkts die auf die Benutzeroberfläche reagierende Klasse zum Rastercontainer hinzu, wodurch der Stapel unter 560 Pixel (35 Em) gerendert wird. Wenn dieser Haltepunkt für Ihren Inhalt nicht funktioniert, empfehlen wir Ihnen, wie oben beschrieben einen benutzerdefinierten Haltepunkt zu schreiben.

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

Dies sind Standardgitter, bei denen es sich um responsive Klassengittercontainer handelt, die von ui-responsive erstellt wurden (Schnittstellenantwort, benutzerdefinierte Klasse, My-Breakpoint im obigen Beispiel)

Beispiel:

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