ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery モバイル Web 開発のためのレスポンシブ レイアウト デザインの簡単な紹介_jquery
jQuery モバイル Web 開発のためのレスポンシブ レイアウト デザインの簡単な紹介_jquery
- WBOYオリジナル
- 2016-05-16 15:27:291313ブラウズ
レスポンシブレイアウトデザインとは、ユーザーデバイスの画面解像度に応じてユーザーデバイスに応答するデザインです。これは、ユーザーがモバイル、タブレット、またはデスクトップ デバイスで Web ページを閲覧しているかどうかに関係なく、デザインはデバイスの画面解像度に基づいて特定のレイアウトを表示することでデバイスに適切に応答することを意味します。
フレームワークのドキュメントでは、実際には、jQuery Mobile フレームワークと CSS3 メディア クエリを組み合わせて、独自のレスポンシブ デザインを実装しています。さまざまな画面解像度にどのように反応するか。
カスタム スタイルを使用しない場合、グリッドはすべての画面幅にわたって 3 列のレイアウトになります。
カスタム スタイルでは、このグリッドを狭い幅にオーバーレイしてから、標準の 3 列レイアウトに切り替えます。非常に広い画面幅では、次のように最初の列が幅の 50% を占めるようにします:
これを実現するには、「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>
