CSS
JavaScript
レスポンシブ
MediaQueries

レスポンシブ・ウェブ・デザインでJavaScriptとMedia Queriesのブレークポイントを揃える

記事がだいぶ古くなってしまったので、オーバーライド。
今ならmatchMediaを使ったほうがいいですね。

JavaScript
const mq = window.matchMedia('(min-width: 768px)');

const handleWindowChange = () => {
  if (mq.matches) {
    console.log('PC');
  } else {
    console.log('SP');
  }
};

mq.addListener(handleWindowChange);
handleWindowChange(mq);

これなら、HTML側に余分な要素を追加しなくて良いです。

以下、古い記事。


レスポンシブ・ウェブ・デザインの案件で、ブレークポイントがCSSのMedia QueriesとJavaScriptでスクロールバー分ずれてしまうときの対処法メモ。

HTMLには空要素を追加。

html
<!-- Media Queries 判別要素 -->
<div class="mediaQueries" id="js-mediaQueries"></div>

font-familyの値に任意の文字を追加。

scss
.mediaQueries {
    display: none;
    font-family: 'pc';
    @media screen and (max-width: 768px) {
        font-family: 'tab';
    }
    @media screen and (max-width: 480px) {
        font-family: 'sp';
    }
}

font-familyの文字列でブレークポイントを判定し、ブレークポイント変更時に一度だけ処理をする。
(要素の取得にjQueryを使用)

JavaScript
var $win = $(window),
$mediaQueries = $('#js-mediaQueries'),
widthStatus = '';

$win.on('load resize', function() {
    var fontFmaily = $mediaQueries.css('font-family').replace(/"/g, '');

    if (fontFmaily === 'pc' && widthStatus != 'pc') {
        // PCの処理
        console.log('pc');
        widthStatus  = 'pc';
    } else if (fontFmaily === 'tab' && widthStatus != 'tab') {
        // TABの処理
        console.log('tab');
        widthStatus  = 'tab';
    } else if (fontFmaily === 'sp' && widthStatus != 'sp') {
        // SPの処理
        console.log('sp');
        widthStatus  = 'sp';
    }
});

デモページ

参照:
Media Queries(メディアクエリ)とJavaScriptの連携について
リサイズやスクロール時に1回だけ処理を行う