シンプルで良さそうだったので一応備忘録。
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のデュアルライセンスです。ご利用は以下よりどうぞ。
