Google純正のレスポンシブデザインのテストツール Resizer

cap14

ResizerはGoogle純正のレスポンシブデザインのテストツールです。

URLを入力すると、様々なブレークポイントでサイトを見ることができます。同様のツールはよくありますが、Google純正という点が信頼できます。

Googleはブレークポイントについて独自のガイドラインを提示しています。

layout_adaptive_breakpoints_01

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

Resizerでは、このガイドラインに則って、デスクトップ版は480px、 600px、 840px、 960px、 1280px、 1440px、1600pxのブレークポイントをワンクリックで切り替えることができます。

スマホ・タブレット版は、360px、600px、720px、1024pxのブレークポイントをワンクリックで切り替えることができます。

↓URLを入力することで各デバイスでの表示をレビューできる

cap10

↓1440pxでの表示

cap13

↓360pxでの表示

cap12_03

関連記事

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • Posted on
  • Updated on
  • Views 2,126