• かちびと.net

    画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.jsのご紹介です。軽量化につなげる事も出来そうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js

スポンサーリンク

画面のサイズを指定して、その
サイズに応じて任意のCSSファイル
をロードするスクリプトのご紹介。
Media Queries等によってCSSが
肥大化してしまった場合は使って
あげると軽量化できるかもですね。

指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。

Sample


Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。

さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。

  1. 幅が600px以下ならJQMのCSSをロード
  2. 幅が1024px以下なら何も読み込まない
  3. それ以外はJQMのCSSをロード

こう設定すれば、601px~1024pxのみ、JQMのCSSをロードしなくなります。

動作は以下で横フレームを動かせば確認出来ます。

Sample

コード

<script src="sizeit.min.js"></script>
<script>
	sizeit.configure(
		{ max: 600, css: "small.css", name: "small" },
		{ max: 1024, css: "medium.css", name: "medium" },
		{ css: "large.css", name: "large" }
	);
</script>

スクリプトを読み込んで、ブレークポイントを設定するだけ。上記を見れば設定方法は分かりますよね。シンプルでいい感じ。

これは個人的にお世話になりそう。ライセンスはMITです。

sizeit.js

URL :
TRB :

Ads

Posts

Contact

Services