1. /
  2. レスポンシブ

レスポンシブ

JSを画面サイズによって切り替え

JavaScript
1
2
3
4
5
6
7
8
9
$(function(){
        if(window.matchMedia('(max-width:767px)').matches) {
　　　　　　　　　　// 処理
        } else if (window.matchMedia('(min-width:768px) and (max-width: 999px)').matches){
　　　　　　　　　　// 処理
        } else {
　　　　　　　　　　// 処理
        }
});

使い勝手が良いのでメモ

vwを利用してfont-sizeをレスポンシブにめんどくさいのでSassのmixinを利用

Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
@function get_vw($size, $viewport:基準とする画面幅){
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}
 
@mixin fz_vw($font_size:10){
  font-size: $font_size * 1px;
  font-size: get_vw($font_size);
}
 
p{
  @include fz_vw(13);
}