LoginSignup
26

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-10-06

記事がだいぶ古くなってしまったので、オーバーライド。
今なら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回だけ処理を行う

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26