/RGrid

Responsive Grid

Primary LanguageJavaScript

RGrid

RGrid は PocketGrid 用の幅指定クラス(Grid class)を提供します。(rgrid.css は PocketGrid を含みます。) 基本的なHTMLの書き方は PocketGrid を参照してください。

Grid class

幅指定クラスはgt24-7のような名前で提供されます。

  • gtはタブレット向けのクラスであることを表します。メディアクエリによりwindow幅が 540px ~ 959px の時だけ有効になります。
  • モバイル向けクラスの接頭辞はgmです。window幅が 540px 未満の場合に有効になります。
  • PC向けクラスの接頭辞はgpです。window幅が 960px 以上の場合に有効になります。
  • window幅に関係なく指定したい場合はgrという接頭辞を使います。他の接頭辞クラスと併用するとデフォルト値として働きます。
  • 24-7は、全体を24ブロックに等分した場合の7ブロック分の幅であることを表します。分母に指定できる数は 24、12、10、8、7、6、5、4、3、2 で、分子には 1 ~ 分母-1 までの数を指定できます。
  • 100%を指定したい場合には、gt1のような、接頭辞の後に 1 をつけたクラスを指定します。ただし、blockクラスはデフォルトが100%なので、gt24-24というような指定も(そのようなクラスはありませんが)可能です。
  • 非表示にしたい場合には、gt0のような、接頭辞の後に 0 をつけたクラスを指定します。メニューリストをモバイルの時だけプルダウンにしたい場合などに有効です。

対応ブラウザ

  • Chrome

  • Firefox

  • Safari

  • Internet Explorer 9+

  • Internet Explorer 6-8 (with rgrid4ie.js)

      <!--[if lte IE 8]>
      <script src="rgrid4ie.js"></script>
      <![endif]-->