質問: 前回の質問で記述を欲張り過ぎたのでソースを単純にし、少し方向性も変更いたしました。 【前回の質問】[https://teratail.com/questions/69094]( (読んでいただく必要は無いかもしれませんが参考まで) ### 実現したいこと レスポンシブサイトを作っています。 ウィンドウ幅を変化させた時にリロード無しで下記の処理をしたく思っています。 > > スマートフォンサイズ(767px以下):文字を「**赤**」にしたい。 > > PCサイズ(768px以上):**何も処理をさせたくない**。 > > > ※上記のような例の場合はCSSのメディアクエリを使用すればすぐにできるのですが、実際はもう少し複雑な処理をしたく思っています。 ### 試したこと1 下記ですと、「1PC幅→2スマートフォン幅→3PC幅」に変化させた場合、3の時点でテキストは「赤」のままで解除されません。 ``` 色を表示 ``` ``` $(window).on('load resize', function(){ if( window.matchMedia('(max-width:767px)').matches ){//スマートフォン $('p').css('color','red'); } }); ``` ### 試したこと2 下記のように「else」を加えた場合は、PC幅で文字が「青」、スマートフォン幅で「赤」と切り替わります。 ``` $(window).on('load resize', function(){ if( window.matchMedia('(max-width:767px)').matches ){//スマートフォン $('p').css('color','red'); }else{//PC $('p').css('color','blue'); } }); ``` ただ、「試したこと2」とは異なり、PC幅では何も処理をしたくないのですが、これを、実現する記述方法はありますでしょうか? 必ず同一のセレクタを「else」にも加えて「セット」で記述をする必要があるのでしょうか? もしくは何も処理をしない、という記述の仕方は存在しますでしょうか?(下記の様なイメージです) ``` $(window).on('load resize', function(){ if( window.matchMedia('(max-width:767px)').matches ){//スマートフォン $('p').css('color','red'); }else{//PC $('p') //←何も処理をしないという記述の方法はありますでしょうか? } }); ``` 一通り「matchMedia」を使った条件分岐について調べてみたものの、必ず「else」があり、「if」で指定したものと同じセレクタとセットで条件分岐処理をしているものばかりで答えに辿り着けません。 もし他に記述の方法がございましたらご教授いただけないでしょうか? なにとぞよろしくお願いいたします。
回答: > > PC幅では何も処理をしたくないのですが > > > メディアクエリを使って自動切り替えするのでもない限り、**元に戻す**処理が必要になります。 ただ、この例では、簡易的にこんな書き方もできます。 ``` $(window).on('load resize', function(){ var matching = window.matchMedia('(max-width:767px)').matches; $('p').css('color', matching ? 'red' : 'blue'); }); ```