ブレークポイントで表示する内容を切り替える方法のサンプルです。
画面サイズ768pxを基準に表示を切り替えます。
使用するclass名
.sp：画面サイズがxsより小さい時に適用（表示）します。
.pc：画面サイズがmsより大きい時に適用（表示）します。
View
xsで表示するdiv
sm以上で表示するdiv
xsで表示するspan
sm以上で表示するspan
Source
1 2 3 4 5 6 7 8 | <div class="sp">xsで表示するdiv</div> <div class="pc">sm以上で表示するdiv</div> <hr> <span class="sp">xsで表示するspan</span> <span class="pc">sm以上で表示するspan</span> <hr> <img src="/common/img/_sample/sample_blue.png" class="sp"> <img src="/common/img/_sample/sample_red.png" class="pc"> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* ==================================================== 表示・非表示 ==================================================== */ @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; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /* ==================================================== 表示・非表示 ==================================================== */ @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;} } } |