JavaScript でメディアクエリを行う window.matchMedia の使い方
画面サイズに応じて任意の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
[CSS]ちょっと面白いMedia Queriesの使い方 -表示サイズで異なるメッセージを表示するテクニック
ArleyM.com：幅1200pxで表示 ArleyM.comはCSS-Tricksの個人サイトで、Media Queriesが使用されているのでサイズを変更してみてください。 表示サイズを変更すると、下部のメッセージ「BE なんとか」が変わります。 メッセージのパターンは165種類、Media Queriesが165個セットされてますｗ ArleyM.com：幅480pxで表示 [ad#ad-2] 実装 「BE なんとか」のメッセージは、「BE」だけ固定で、「なんとか」はMedia Queriesと擬似要素を使用して配置しています。 HTML h2要素をdiv要素で内包したシンプルな実装です。 <div class="row"> <h2>Be <span></span></h2> </div> 空のspan要素はCSSでコンテンツをレンダリングするために使用します。 CSS Media
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
