scss メディアクエリーと连携するJS

Posted 2021-05-18

/* mediaQuery-JS
==================================================== */
var is_sp,is_pad,is_pc;
var $mediaQueries = $('.js-mediaQueries');
$(window).on('load resize orientationchange', function() {
	var layout = $mediaQueries.css('font-family').replace(/"/g, '');
	if (layout === 'sp') {
		is_sp  = true;
		is_pad = false;
		is_pc  = false;
		$('html').addClass('is-sp').removeClass('is-pad is-pc');
	} else if (layout === 'tab') {
		is_pad = true;
		is_sp  = false;
		is_pc  = false;
		$('html').addClass('is-pad').removeClass('is-sp is-pc');
	} else {
		is_sp  = false;
		is_pad = false;
		is_pc = true;
		$('html').addClass('is-pc').removeClass('is_sp is-pad');
	}
});

<div class="js-mediaQueries mediaQueries"></div>

.mediaQueries {
  font-family: 'sp';
}
@include mq(tb-up) {
  .mediaQueries {
    font-family: 'tab';
  }
}