/image%2F0125000%2F201304%2Fob_47895faddaed68a2ed7ebf13bab273a7_scraplex-circle-white.png)
任意のWebサイトを様々な画面サイズで表示確認出来るレスポンシブWebデザインの開発補助用jQueryプラグイン・jResize - かちびと.net http://t.co/837sXNRa
November 07, 2012
Advertising
/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2012%2F11%2Fjresize01.jpg)
任意のWebサイトを様々な画面サイズで表示確認出来るレスポンシブWebデザインの開発補助用jQueryプラグイン・jResize | かちびと.net
手軽で良かったのでご紹介。レスポ ンシブWebデザイン対応のサイト構築 のレイアウト確認用のjQueryプラグ インです。開発補助用になりますね。 同じツールも沢山ありますけど。。 最近 ご紹介したResponsivator を使うのでなくてもいいっちゃいいんですけど、これはこれで良かったので。 jResize 表示されているWebサイトはiframeで呼び出しているものです。上部のバーでその場でiframeをリサイズ→レスポンシブなWebサイトの表示を確認出来る、というものです。 サイズを変えた状態。 コード コアとプラグインを読み込みます。 $.jResize({ viewPortSizes : ['320px', '480px', '540px', '600px', '768px', '960px', '1024px', '1280px'], backgroundColor : '444', // HEX Code fontColor : 'FFF' // HEX Code }); あとはセッティングするだけ。確認したいサイズとバーの背景色、文字色を指定するだけ。 マークアップは srcを指定した iframe を用意するだけ。 ブックマークレットにしてもいいかもしれない。