レスポンシブデザイン用！デバイス毎に改行する・しないを切り替える方法

昨今では一般的になったレスポンシブウェブデザインに関するコードハック。

テキストを読みやすくするうえで考慮すべき改行の位置。パソコンとスマホでは一行に表示できる文字数が異なるため、単純にパソコン基準で全デバイス統一で改行すると、スマホ表示時に望ましくない位置で改行され読みづらくなってしまうケースがある。

そこで、改行の位置もデバイスごとにコントロールするのがベターだ。コードがやや冗長になるが、必要に応じて適宜利用するようにしよう。

デバイス毎に改行する・しないを切り替える方法

以下のようにclass付きbrのプロパティを指定する。

br.xs {
 display: none;
}
br.sm {
 display: none;
}
br.lg {
 display: block;
}

//タブレット
@media screen and (max-width: 979px) {
 br.xs {
  display: none;
 }
 br.sm {
  display: block;
 }
 br.lg {
  display: none;
 }
}

//スマホ
@media screen and (max-width: 767px) {
 br.xs {
  display: block;
 }
 br.sm {
  display: none;
 }
 br.lg {
  display: none;
 }
}

HTMLでは、全デバイス共通の改行であればbrを、レスポンシブの改行であればbrにclassを付与すればよい。

<p>文章をここに記載します。文章をここに記載します。文章をここに記載します。<br>
パソコンのみ改行。パソコンのみ改行。<br class="lg">
タブレットのみ改行。タブレットのみ改行。<br class="sm">
スマホのみ改行。スマホのみ改行。<br class="xs">
パソコン＆タブレットで改行。パソコン＆タブレットで改行。<br class="lg"><br class="sm">
タブレット＆スマホで改行。タブレット＆スマホで改行。<br class="sm"><br class="xs">
文章をここに記載します。文章をここに記載します。文章をここに記載します。</p>