scss mediaqueryの呼び出しhttp://www.tam-tam.co.jp/tipsnote/html_css/post10708.html

Posted 2021-05-18

//SPファーストの場合
@include mq(sp-only) {

}
@include mq(tb-up) {

}
@include mq(tb-only) {
	
}
@include mq(pc-up) {
	
}

//PCファーストの場合
@include mq(pc-only) {

}
@include mq(tb-down) {

}
@include mq(tb-only) {
	
}
@include mq(sp-down) {
	
}

@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

//http://www.tam-tam.co.jp/tipsnote/html_css/post10708.html
$breakpoints: (
  'sp-only': 'screen and (max-width: 767px)',
  'tb-up': 'screen and (min-width: 768px)',
  'tb-only': 'screen and (min-width: 768px) and (max-width: 1024px)',
  'pc-up': 'screen and (min-width: 1025px)',
);
// SPファーストの場合
  // 'sp-only': 'screen and (max-width: 767px)', //SPだけに効かせたい
  // 'tb-up': 'screen and (min-width: 768px)',	　//TB以上に効かせたい
  // 'tb-only': 'screen and (min-width: 768px) and (max-width: 1024px'),	//TBだけに効かせたい
  // 'pc-up': 'screen and (min-width: 1025px)',	　//PC以上に効かせたい
// PCファーストの場合
  // 'sp-down': 'screen and (max-width: 767px)',
  // 'tb-only': 'screen and (min-width: 768px) and (max-width: 1024px'),	//TBだけに効かせたい
  // 'tb-down': 'screen and (max-width: 1024px)',	//TB以下に効かせたい
  // 'pc-only': 'screen and (min-width: 1025px)',	//PCだけに効かせたい