画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net
画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード 幅が1024px以下なら何も読み込まない それ以外はJQMのCSSをロード こう設定すれば、601px～1
Media Queriesで設定したブレークポイントをJavaScriptと:after擬似要素でチェックする - かちびと.net
便利そうだったので備忘録。Media Queriesで設定したブレークポイント を簡単なJSのコードでチェックする、 という方法です。CSSの:after擬似 要素を併用してチェックします。シ ンプルで良いのでは。 GW中なので軽めの話題。Media Queriesで設定したブレークポイントをJavaScriptでチェックします。 :after擬似要素を使う @media (max-width: 500px) { body:after { content: 'foo'; display: none; } body{background:#eee;} } まずは:after擬似要素でcontentプロパティを使い、display:none;しておく。 で、以下のようにJSを書く。 var size = window.getComputedStyle(document.body,':aft
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
