【CSS】スマホのみ改行する方法

ろん
ろん

レスポンシブデザインでコーディングしていると、スマホだけ改行したい部分が出てくる場合があります。
今回はその方法を紹介します。

HTML

改行したい位置に<br class="brSmt">を設置します。class名は自分が分かりやすいもので問題ないです。

<p>1000社1500サイト以上のホームページ作成実績とノウハウの蓄積にて<br class="brSmt">実用的なWebサイトの構築を行います。</p>

CSS

あとはcssで指定するだけです。今回はデバイスの横幅が760px以下になったら改行するように設定します。

@media screen and (min-width: 761px) { /*横幅が761px以上になったら適用*/
	.brSmt{ display: none; }
}

横幅が761px以上になったら display:none つまり、改行タグを表示しないよう指定します。

逆に@media screen and (min-width: 761px)を@media screen and (max-width: 760px)にすると、760px以下は改行タグが表示されなくなり、761px以上は改行されます。PCだけ改行したい時に使える方法です。

関連記事