レスポンシブ デザインはデザイナーの間でますます尊重されるようになっており、デザインが合理的で正しいことを検証するための効率的なテスト ツールを見つける必要があります。レスポンシブ ページ デザインをオンラインでテストするのに役立つ 16 のツールを紹介します。皆さんに気に入っていただければ幸いです。
Responsinator は、さまざまなデバイスのビューポートで Web サイトの効果を表示する機能を提供し、レスポンシブをサポートする必要があるデバイスを簡単に確認できます。デザインレンダリング。
レスポンシネータとは異なり、レスポンシベータはさまざまなサイズで表示レンダリングを提供します
レスポンシブは 5 つのデバイスでプレビュー効果を提供します
レスポンシベーターに似ていますが、インターフェースがより単純です
ドラッグしてウィンドウ サイズを変更し、さまざまなデバイス画面をシミュレートできます
このツールは gbin1 の以前の記事で紹介しました。詳細については、レスポンシブ デザインをオンラインでテストするのに役立つ Web ツールを共有する - Screenqueri.es を参照してください。最も興味深いのは、このツールが Test をサポートしていることです。アプリケーションまたは Web サイトをローカルホスト上にローカルに配置します。
レスポンシブ デザインのテストに役立つツール ブラウザー
応答性のテストに役立つブックマーク。ブラウザに簡単に統合できます
この JS は、幅と高さを検出するために body 要素に疑似要素を追加するのに役立ちます。もちろん、http://izilla.com.au/git/izilla が提供するブックマークを使用することもできます。 mq .debugger.bookmarklet.html
4 種類のデバイスをサポートし、関連開発のための設計図やドキュメントも提供するオンラインのレスポンシブ デザイン テスト ツールです。詳細については、過去の記事をご確認ください: 異なるクライアントでウェブサイトを閲覧するためのツールを共有する - Screenfly
Firefox を使用している場合は、ショートカット キー (Ctrl + Shift + M) で開発ツールを直接使用できます
別のブックマーク ツール
開発および設計プロセスを促進するために応答性の高いウィンドウを作成するのに役立つ jQuery 応答性開発ツール プラグイン
指定された幅と高さで新しいウィンドウを作成するのに役立つシンプルな Web ツール
iPhone、Android、その他のデバイスの表示をサポートする、実際の写真付きのオンライン表示応答ツールです。
オンラインでレスポンシブ効果を表示するための比較的新しい Web ツールで、さまざまなサイズの表示をサポートしています。
上記は、私たちが収集した 16 個のオンラインおよびローカルのレスポンシブ テスト ツールです。比較的、オンライン ツールは、開発中のデバッグに適しています。具体的な用途 ニーズに合わせてお選びください。気に入っていただければ幸いです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
