ブレークポイントCSS切り替え
ブレークポイントで表示する内容を切り替える方法のサンプルです。 画面サイズ768pxを基準に表示を切り替えます。
使用するclass名
.sp：画面サイズがxsより小さい時に適用（表示）します。 .pc：画面サイズがmsより大きい時に適用（表示）します。
View
xsで表示するdiv
sm以上で表示するdiv
xsで表示するspan
sm以上で表示するspan
Source
xsで表示するdiv
HTML
sm以上で表示するdiv
HTML
HTML
<span class="sp">xsで表示するspan</span>
<span class="pc">sm以上で表示するspan</span>
HTML
<img class="sp" src="/common/img/_sample/sample_blue.png">
<img class="pc" src="/common/img/_sample/sample_red.png">
CSS
/* ====================================================
表示・非表示
==================================================== */
@media print, screen and (min-width: 768px) {
div.sp { display: none; }
div.pc { display: block; }
img.sp,
span.sp { display: none; }
img.pc,
span.pc { display: inline; }
}
@media screen and (max-width: 767px) {
div.sp { display: block; }
div.pc { display: none; }
img.sp,
span.sp { display: inline; }
img.pc,
span.pc { display: none; }
}SCSS
/* ====================================================
表示・非表示
==================================================== */
@media print, screen and (min-width: 768px) {
div {
&.sp {display:none;}
&.pc {display:block;}
}
img,
span {
&.sp {display:none;}
&.pc {display:inline;}
}
}
@media screen and (max-width: 767px){
div {
&.sp {display:block;}
&.pc {display:none;}
}
img,
span {
&.sp {display:inline;}
&.pc {display:none;}
}
}
