• かちびと.net

    Media Queriesのように、モニターサイズに応じてスタイルを変更可能にする非依存型で1KBの軽量jsライブラリ・syzeのご紹介です。シンプルで使いやすそうですね。

    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

Media Queriesのように、モニターサイズに応じてスタイルを変更可能にする非依存型で1KBの軽量jsライブラリ・syze

スポンサーリンク

シンプルで良さそうだったので一応備忘録。
Media Queriesライクにブレークポイントに
応じてスタイルを変更できるライブラリです。
非依存型で1KBと、超軽量スクリプトなので
簡単なキャンペーンサイトとかならこれでも
いいかもしれないですね。

Media Queriesのようにデバイスを限定しないクロスブラウザ対応で、他のライブラリに依存せず利用出来る、圧縮版は1KBと軽量、というのが特徴です。

syze


サイズに応じてスタイルが変わっています。何してるかというと、非常にシンプルで指定したブレークポイントに合わせて<html>にclassを付加させてるんですね。

サンプルどうぞ。

Sample ※動作確認はresponsivepxが便利です


iPhoneだってOK。実機でも確認済みです。

コード

<script src="syze.min.js"></script>
<script>syze.sizes(320,480,768,1024,1920);</script>

ライブラリを読み込んでブレークポイントを設定すればOK。あとはcssを書くだけです。

前述したようにhtmlにclassが付加されます。

<html class="gt320 gt480 is768 lt1024 lt1920">

is***が現在、ltは現在のモニターサイズより大きいサイズ、gtは現在以下のサイズです。なので、isに合わせてcssを書けばOK。classはモニターサイズに応じて動的に変更されます。

これを踏まえてcssを書きます。

body { color:#000; }
.is320  body { color:#111; }
.is480  body { color:#222; }
.is768  body { color:#333; }
.is1024 body { color:#444; }
.is1920 body { color:#555; }


そういう仕様なのでもちろんIE6などブラウザも選ばず使えます。

他にもちょっとした機能も備わってるみたい。使いやすくていいのではないかなと。ライセンスはMIT & GPLのデュアルライセンスです。ご利用は以下よりどうぞ。

syze

URL :
TRB :

Ads

Posts

Contact

Services