レスポンシブwebデザインでの改行位置
レスポンシブ対応のホームページを作る際に、よくある文章の改行位置問題。
パソコンで見たときはいい感じに改行されているのに、 スマートフォンで見たときには、おかしな位置で改行されている。。。
どちらで見た場合もきれいに改行されるよう、ブレークポイントで改行を制御するサンプルです。
画面サイズ768pxを基準に改行位置を切り替えます。
使用するclass名
.sp：画面サイズがxsより小さい時に改行します。 .pc：画面サイズがmsより大きい時に改行します。
View
テキストの改行位置を指定します。
xsの時はここから改行します。
sm以上の時はここで改行します。
Source
HTML
テキストの改行位置を指定します。<br>xsの時はここから改行します。<br>sm以上の時はここで改行します。CSS
/* ====================================================
改行位置
==================================================== */
@media print, screen and (min-width: 768px) {
br.sp { display: none; }
br.pc { display: inline; }
}
@media screen and (max-width: 767px) {
br.sp { display: inline; }
br.pc { display: none; }
}SCSS
/* ====================================================
改行位置
==================================================== */
@media print, screen and (min-width: 768px) {
br {
&.sp {display:none;}
&.pc {display:inline;}
}
}
@media screen and (max-width: 767px){
br {
&.sp {display:inline;}
&.pc {display:none;}
}
}
