レスポンシブでPC・SPで改行位置を切り替える方法
レスポンシブでサイトを作る際にPCでいい位置で改行したけどSP時には改行してほしくない!ってときがありますよね。
今回は改行位置をメディアクエリを使ってCSSのみで解決する方法を紹介します。
PCのみ・SPのみで改行させる方法
※ブレイクポイントを680pxとした場合
680px以下の時「.pc」は非表示、「.sp」は表示。
680px以下の時「.pc」は表示、「.sp」は非表示。
となるように下記のようにCSSを書きます。
@media screen and (min-width: 680px){ .pc { display:block; } .sp { display:none; } } @media screen and (max-width: 680px){ .pc { display:none; } .sp { display:block; } }
これを改行する「br」のclassして追加するだけです。
例として
<p>PCのみで改行したいな〜!<br class="pc">わーい!</p> <p>SPのみで改行したいな〜!<br class="sp">わっしょい!</p>
これだけ!
どちらかのみ改行したい時試してみてください。
コメント