jQuery モバイル Web 開発のためのレスポンシブレイアウトデザインの簡単な紹介

jQuery モバイル Web 開発のためのレスポンシブレイアウトデザインの簡単な紹介_jquery

WBOY

リリース： 2016-05-16 15:27:29

オリジナル

1311 人が閲覧しました

レスポンシブレイアウトデザインとは、ユーザーデバイスの画面解像度に応じてユーザーデバイスに応答するデザインです。これは、ユーザーがモバイル、タブレット、またはデスクトップデバイスで Web ページを閲覧しているかどうかに関係なく、デザインはデバイスの画面解像度に基づいて特定のレイアウトを表示することでデバイスに適切に応答することを意味します。

フレームワークのドキュメントでは、実際には、jQuery Mobile フレームワークと CSS3 メディアクエリを組み合わせて、独自のレスポンシブデザインを実装しています。さまざまな画面解像度にどのように反応するか。

カスタムスタイルを使用しない場合、グリッドはすべての画面幅にわたって 3 列のレイアウトになります。

2015124141324766.jpg (830×56)

カスタムスタイルでは、このグリッドを狭い幅にオーバーレイしてから、標準の 3 列レイアウトに切り替えます。非常に広い画面幅では、次のように最初の列が幅の 50% を占めるようにします:

2015124141417389.jpg (827×56)

これを実現するには、「my-breakpoint」などの新しいクラス名をカスタマイズする必要があります。
このクラスはカスタムメディアクエリの範囲指定されたスタイルに使用され、このクラスがグリッドコンテナーに追加された場合にのみ適用されます。メディアクエリパッケージの場合、次の条件を適用する 50em スタイルのみが必要です。
メディアクエリでは、ピクセルの代わりに EM 単位を使用して、メディアクエリで画面幅に加えてフォントサイズも考慮されるようにします。 EMS 画面の幅を計算するには、本文のデフォルトのフォントサイズであるターゲット幅に 16 ピクセルを追加します。

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

ログイン後にコピー

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

ログイン後にコピー

このメディアクエリでは、幅を 100% に設定し、float 属性を画面幅 50em に無効にします。これらのルールは、ui-block-a から ui-block-e スタイルまでのすべてのクラスのセレクターグリッドをスタックすることによって、すべてのグリッドタイプに適用されます。
これにより、グリッドの応答性が向上し、追加のスタイルルールが追加されて、各ブレークポイントの変更が容易になります。独自のコンテンツとレイアウトのニーズに基づいて、必要なだけカスタムブレークポイントを作成することをお勧めします。

ワイドスクリーンのブレークポイントを追加して比率を調整します

上記の例に基づいて、追加のブレークポイントを追加して、最初の列の幅が 50% になり、他の 2 つの列の幅が 75em (1200 ピクセル) より 25% 大きくなるように、最小幅メディアクエリを追加して幅を調整できます。 width カスタムスタイルでは次のようになります:

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

ログイン後にコピー

注: プラットフォーム間での丸めの問題に対処するには、わずかに狭い幅の設定が必要です。

UI 応答型のカスタムブレークポイントを適用します

このデフォルトのブレークポイントを使用して、ui 応答クラスをグリッドコンテナーに追加します。これにより、スタックが 560 ピクセル (35em) 未満でレンダリングされます。このブレークポイントがコンテンツに対して機能しない場合は、上記のようにカスタムブレークポイントを作成することをお勧めします。

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

ログイン後にコピー

これらは、ui-sensitive によって作成されたレスポンシブクラスグリッドコンテナーである標準グリッドです (上記の例では、インターフェイスの応答、カスタムクラス、my-breakpoint)

例:

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

ログイン後にコピー

2015124141513710.jpg (832×333)