Clever Geek Handbook

Restive.JSを使用したレスポンシブレイアウト

まず第一に、私の専門分野はバックエンドですが、特に私が単独で行うプロジェクトでは、常に組版とクライアント側に対処する必要があります。 特にモバイルインターネットの普及の時代において、サイトはすべてのデバイスで便利である必要があり、その多様性も含めて長い間書かれていませんでした。 幸いなことに、CSS3では、 メディア式（メディアクエリ）を使用してこれを行うことができます。 しかし、私にとってより便利に思える別の方法があります。 画面のサイズ、向き、デバイスの種類に応じて、htmlタグのグローバルスタイルを設定できます（他の要素を使用することもできます）。 CSSでは、これらのクラスから始めて、さまざまなケースに特別なスタイルを設定します。 したがって、CSSはより理解しやすくなり、メディア表現の使用を取り除きます。 これにはRestive.JSが必要です 。 私は開業医であり、プラグインのサイトで詳細な説明を読む方が良いので、この記事ではアダプティブミニページの作成に限定します。



HabrでRestive.JSに関する記事を頑固に検索しましたが、見つかりませんでした。



動作原理は次のとおりです。 ウィンドウの向きやサイズを変更するとき（ページをロードするときも）、グローバルクラスがDOMの選択した要素に追加されます（htmlまたはbodyを推奨）。 Restive.JSによってインストールされる標準クラス（is_mobile、is_landscapeなど）と、特定の条件下でインストールされるカスタムクラスの両方を使用できます。



Restive.jsの接続 


<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="restive.js"></script> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="styles.css"> <script type="text/javascript"> $(document).ready(function () { $('html').restive({ breakpoints: ['320', '720'], classes: ['lt320', 'lt720'], turbo_classes: 'is_phone=phone,is_tablet=tablet,is_pc=pc,is_portrait=portrait,is_landscape=landscape' }); }); </script> </head> <body> </body> </html>




はい、彼にはjQueryが必要です。 開発者は、選択したセレクターのページで一度開始します。開発者は、htmlまたはbodyをよりグローバルなものとして使用することをお勧めしますが、他の要素を使用する必要がある場合もあります。



構成全体がオブジェクトとしてコンストラクターに渡されます。このオブジェクトには、ブレークポイント、クラス、turbo_classesの3つの主要な要素が含まれている必要があります。



ブレークポイント


このパラメーターは境界点を示します。 Restive.JSはブラウザウィンドウを常に監視し、条件が満たされたら適切なクラスを設定します。 配列 また、Restive.JSには、ピクセルの代わりに指定できる標準のポイント名があり、ほとんどの画面をカバーしますが、完全に一致するもので動作します。 一部の中間または非標準オプションでは、ピクセル数に基づいてポイントを使用することをお勧めします。



クラス


この配列では、各ポイントのクラスが指定されています。 インデックスNのポイントは、インデックスNのクラスに対応します。つまり、 これらの配列の長さは同じです。 この例では、次のようになります。ユーザーの画面幅が320以下の場合、lt320クラスは321から720にインストールされます-lt720、721以上から-クラスなし。



ターボクラス


このパラメーターがないと、Restive.JSはその標準クラスを追加しません。 これは基本的に、追跡するクラスをリストする行です。 追跡できる標準値は、is_mobile、is_phone、is_retina、is_tablet、is_pc、is_tv、is_portrait、is_landscapeです。 たとえば、iPhoneでデモにアクセスすると、エイリアスクラスmobile、phone、portrait（landscape）がインストールされます。



ラップトップでこのページを開くと、htmlには2つのクラス（landscapeとpc）しかありません。



Restive.JSのCSS


HTMLにコンテンツを追加します。 これはリストになりますが、異なる画面では、同じ行に異なる数のリストアイテムが配置されます。 「タスクが単純すぎます」とあなたは言い、あなたは正しい。 しかし、Restive.JSの本質を正確に示したいと思います。幸運なことに、誰もが自分自身で休みを取ります。 デバイスの確認も行います。 



 <div class="device device-phone">Phone</div> <div class="device device-pc">PC</div> <div class="device device-tablet">Tablet</div> <ul> <li class="casablanca">Casablanca</li> <li class="moscow">Moscow</li> <li class="caracas">Caracas</li> <li class="dehli">Dehli</li> </ul>




これが、CSSで境界クラスを使用する方法です。 私の意見では、メディア表現を使用するよりもはるかに明確です（注意、絶対に主観的な意見）。 



 .device { display: none; width: 96%; font-size: 20px; padding: 2%; text-align: center; background: #eee; } .pc .device-pc, .tablet .device-tablet, .phone .device-phone { display: block; } ul { list-style: none; width: 100%; float: left; padding: 0; margin: 0; } li { width: 25%; height: 200px; line-height: 200px; font-size: 20px; float: left; text-align: center; color: #fff; background-position: cover; } li.casablanca { background: url(casablanca.jpg); } li.moscow { background: url(moscow.jpg); } li.caracas { background: url(caracas.jpg); } li.dehli { background: url(dehli.jpg); } .lt720 li { width: 50%; } .lt320 li { width: 100%; }




また、Restive.JSには、特に役立つ可能性のある便利なイベントがいくつかあります（たとえば、電話の向きを変更する場合）。



さまざまなデバイスでデモを開き 、画面を変更するなど。



さらなる研究のためのリンク


GitHubページ

公式文書


More articles:


All Articles