レスポンシブデザインの初期設定（sass版）

いざという時のレスポンシブデザインの初期設定の忘備録

body, div, img{
background: snow;
padding:0;
margin:0;
}

@mixin pc {
@media (min-width: 1025px) {
@content;
}
}

@mixin tb {
@media (min-width: 768px) and (max-width: 1024px) {
@content;
}
}

@mixin sp_yoko {
@media (min-width: 568px) and (max-width: (767px)) {
@content;
}
}

@mixin sp_tate_l {
@media (min-width: 376px) and (max-width: (567px)) {
@content;
}
}

@mixin sp_tate_m {
@media (min-width: 321px) and (max-width: (375px)) {
@content;
}
}

@mixin sp_tate_s {
@media (max-width: (320px)) {
@content;
}
}

html{
//ベースのフォントサイズ
font-size: 16px;

@include pc {
font-size: 18px;
color: green;
background: tomato;
};

@include tb {
font-size: 14px;
color: pink;
background: gray;
};

@include sp_yoko {
//iphoneの横だけ適用する
font-size: 13px;
color: green;
background: green;
};

@include sp_tate_l {
//iphonePlusの縦だけ適用する
font-size: 13px;
color: tomato;
background: tomato;
};

@include sp_tate_m {
//iphone6,7,8の縦だけ適用する
font-size: 12px;
color: skyblue;
background: skyblue;
#block_01 {
.info-block > div {
display: table;
width: 100%;
}
.info-block {
&__txt {
display: table;
width: 100%;
background: black;
padding: 0;
}
}
}
};

@include sp_tate_s {
//iphoneSEの縦だけ適用する
font-size: 12px;
color: red;
background: red;
#block_01 {
.info-block > div {
display: table;
width: 100%;
}
.info-block {
&__txt {
display: table;
width: 100%;
background: black;
padding: 0;
}
}
}
};
}