windowの幅やタグの幅によりcssを調整するjQuery プラグイン「jquery.flexibleCssSize」

  • このエントリーをはてなブックマークに追加

スマホサイトやレスポンシブサイトを作っていると
windowsの幅に応じてcssを変更したい時がよくあります。

これを使うと指定した基準値からの割合でcssを調整することができます。

こんな時に便利なはず!

  • iPadにも対応させたいし全体を大きくしちゃう(zoomで全体を大きくする際の制御)
  • 画像を一定値から大きくしたくない場合や
    一定値以下にしたくない場合
  • フォントサイズを割合決めて大きくしたり小さくしたり

仕様

  1. 変更したいcssを指定して
  2. 基準となる幅のタグを指定して
  3. 基準となるサイズを指定して
  4. min or max で大きさを制御する
  5. その基準より大きさを調整したい場合に調整したい値を入力

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flexibleCssSize.js"></script>

オプション

初期設定

css : "font-size",
content : $(window),
standard : 480,
minSize : 0,
maxSize : 1000,
minParcent : 0,
maxParcent : 1,
adjustment : 0
css
どのスタイルに適応したいか
content
どのコンテンツの幅を基準とするか
standard
サイズが変更になる基準の幅
minSize
小さくなりすぎないようにサイズ指定
maxSize
大きくなりすぎないようにサイズ指定
minParcent
小さくなりすぎないように%指定
maxParcent
大きくなりすぎないように%指定 (※ SizeとParcentの 両方指定されていても小さい方を基準にします。)
adjustment
調整したい場合

$("header,main,footer").flexibleCssSize({
    css: "zoom", // zoomの値を変更
    content : $('body'), //windowによって可変となるbodyの横幅を基準として
    standard : $('header').width() //固定の横幅headerの値を基準とする
    minParcent : 0.6, // 最小0.6%
    maxParcent : 1.3, //最大1.3%
});

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/97

このページの先頭へ戻る