【CSS】レスポンシブ対策!画面幅によって<br>の位置を変える

PCとスマホをワンソースで作成するときに、文章の改行位置を変えたがるデザイナーやクライアントから要望があった際に
ウィンドウサイズによって改行位置変更

要望を叶えられるよう共有CSSに用意しておいているのが以下です。
CSS

/* hidden
-------------------------------------------------- */
.hidden {
  display: none;
}
.hidden.pcBlock {
  display: inline;
}
@media screen and (max-width: 640px) {
  .hidden.pcBlock {
    display: none;
  }
  .hidden.spBlock {
    display: inline;
  }
}

HTML
スマホ(ウィンドウサイズ横幅640px以下)の場合のみ改行

1歩先の<br class="hidden spBlock"> ライフスタイルへ

PC(ウィンドウサイズ横幅641px以上)の場合のみ改行

1歩先の<br class="hidden pcBlock"> ライフスタイルへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です