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