cssにwidthを固定ピクセルで書かないように

Author:
screenshot_20160919-204754

レスポンシブデザインというものでは、PCもスマホも同じデザインを用いて、cssで制御する。
だから書き方に注意しないと、一部だけPC表示のようになってしまうのです。
その最たるミスはcssのwidthをピクセルで書くこと。

これ、100pxとか200pxとかならいいけど、320pxを超えてなおかつviewportのwidth=device-widthなんてやってしまうとちょい困ったことに。
というのもiPhone5とかの横サイズは320pxなので。
横スクロールバーが出てきてしまうのです。

だからメディアクエリなどでcssを切り替える際には、%で指定すること。
100%にしておけばどんなデバイスでも表示可能ですから。
他にも幾つか注意する点はあるけど、個人的に一番やらかしてしまうミスがこいつですからね。
ま、iPhone5もそろそろ使っているユーザーは減ってきているかもしれないけど。
SEってのもあるからまだ320pxという世界には気をつけなければいけないです。

もちろんスマホの場合device-widthでviewportを設定させればそれ以上のwidthでもいいのですが。
ここら辺はサイトデザイン次第でもあるので、デザイン側と調整しましょうね。

ちなみに100%にしていてもborderとかつけてるとはみ出す可能性があります。
そういう時はbox-sizingの設定をしましょ。

だからモバイルファースト、スマホデザインを先に作ったほうが色々と良いのですよねえ。
そもそもそんな凝ったデザインにしないことが大前提ですが。

Share on Facebook
Pocket