Writer:Asai (20.09.11)

jQueryでブレークポイントを設定するコードのご紹介です。
jQueryでブレークポイントを自由に設定
$(function(){
if (window.matchMedia('(max-width: 668px)').matches) {
/* ウィンドウサイズ668以下の処理を記述 */
} else if (window.matchMedia('(max-width:768px)').matches) {
/* ウィンドウサイズ768以下の処理を記述 */
} else if (window.matchMedia('(min-width:769px)').matches) {
/* ウィンドウサイズ769以上の処理を記述 */
}})
ポイントは「window.matchMedia」
window.matchMediaを活用することで、レスポンシブで自由に動作させたい処理を記述していくことが可能です。また、下記のような応用も可能です。
$(function(){
if (window.matchMedia('(max-width: 767px) and (min-width:669px)').matches) {
/* ウィンドウサイズ669以上、767以下の処理を記述 */
}})
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。