(120) スマホで表示するときだけ改行したい。

投稿者: | 2022年3月11日

106 views

1. やりたいこと

スマホ閲覧時(=画面幅が小さいとき)だけ改行させたい。

2. やってみる

こんな風に書ける。
例えば、画面幅が 700px以下であればスマホ用の表示、すなわち改行させたい場合。

SCSS

.whenSmapho{
  @media (min-width: 700px){    /* viewportが700px以上ならば */
    display: none;              /*  → 表示しない。 */
  }
}

以下のように HTML文中に <br /> を書けばよい。

HTML

あいうえお<br class="whenSmapho" />かきくけこ

3. 参考情報

Windows10で SASS → CSS 変換する方法は、こちらの過去記事に記しています。
(64) 【Sass入門#4】Windows10でもsassを使う。


カテゴリー: CSS

コメントを残す

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)