レスポンシブサイトのコーディング時のbr要素
ちょっと目からウロコだったのでメモ。
あがってきたデザインがパソコン用のサイトの方は改行があるのに、スマフォ用は改行がない。うーん、改行するまとまり箇所をspan要素で囲って、CSSでblock要素化するかなーとも考えたんですけど、美しくない。
そこで、ハッとなった。スマフォのサイズになった時にbr要素を無効にすれば良いんだと。そしたらできた。
@media screen and (max-width: 1000px) {
br {
display: none;
}
}
なんとたったこれだけ。media screenで○○px以下は無効にしてしまいます。特定の箇所だけであれば、その箇所をclass属性でもつけて無効にしてしまえば良い。逆にパソコンサイズの方を改行させないのであれば、パソコン用サイトに改行がなくて、スマフォ用サイトに改行がある場合は、 display: inline; とすることで改行を有効化できます。
