MRRI

レスポンシブコーディングをしている際に、スマホとパソコンで文章の改行位置を変更したいときがあります。
特に文章を中央揃えにしているときが多いように思います。

そんなときは、パソコンサイズ、スマホサイズによって<br>タグを表示・非表示にするclassを付けると簡単に実装できます。

@media screen and (max-width: 767px){
　.pc {display: none; }
}
@media screen and (min-width: 768px){
　.sp {display: none; }
}

<p>スマホサイズのときのみ<br class=”sp”>改行します。</p>
<p>パソコンサイズのときのみ<br class=”pc”>改行します。</p>

デバイスごとに改行位置を変更することは、読みやすさと整った見た目の為に必要だと思います。