jQueryでブラウザの画面幅によって処理を変える

jQueryではブラウザの横幅（画面幅）によって処理を変えることができます。

下の例では、画面の幅が800px以上では緑色に、1000px以上の場合は赤色に、800pxよりも小さい場合は黒色になるという風に、文字の色が画面幅によって変える処理をしています。

See the Pen
jquery-width-window by KUBO (@KUBOGEN)
on CodePen.

jQuery
$(window).on(‘load resize’, function(){
　if (window.matchMedia(‘(min-width: 1000px)’).matches){
　　$(‘h1’).css(‘color’,’red’);
　} else if (window.matchMedia(‘(min-width:800px)’).matches){
　　$(‘h1’).css(‘color’,’green’)
　} else {
　　$(‘h1’).css(‘color’,’black’);
　}
});

ポイントとなるのは条件分岐ですね。

if (window.matchMedia(‘(min-width: 1000px)’).matches){
　//画面幅1000px以上の場合の処理
} else if (window.matchMedia(‘(min-width:800px)’).matches){
　//画面幅800px以上の場合の処理
} else {
　//画面幅800px未満の場合の処理
}

また、次のような書き方もできます。

See the Pen
jquery-width-window2 by KUBO (@KUBOGEN)
on CodePen.

jQuery
$(window).on(‘load resize’, function(){
　var wid = $(window).width();
　if (wid >= 1000) {
　　$(‘h1’).css(‘color’,’red’);
　} else if (wid >= 800) {
　　$(‘h1’).css(‘color’,’green’)
　} else {
　　$(‘h1’).css(‘color’,’black’);
　}
});

画面幅を取得して変数に入れておき、その変数と処理を変えたい画面幅を比較しているだけです。

$(window).on(‘load resize’, function(){
　var wid = $(window).width();
　if (wid >= 1000) {
　　//画面幅1000px以上の場合の処理
　} else if (wid >= 800) {
　　//画面幅800px以上の場合の処理
　} else {
　　//画面幅800px未満の場合の処理
　}

Leave a Comment X