• 締切
  • すぐに回答を!

レスpンシブのCSSについて

  • 質問No.8194287
  • 閲覧数203
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 91% (117/128)

レスポンシブデザインのコーディングをしています。
CSS上で、スマホで参照した場合の表示として、以下のようにメディアクエリを書いています。

@media screen and (max-width: 640px) { ~ }

Chromeで画面幅640pxまで縮めた場合、想定どおりの表示となるのですが、
Firefoxを640pxまで縮めても変化せず、625pxで初めてスマホ時の表示となりました。

縦スクロールバーが表示されているせいで、15px分の解釈の誤差が出てしまっている
ようなのですが、CSSで回避する方法はありますでしょうか。

それともJavascriptなどでfirefoxを判別し、かつ画面幅をチェックして、専用のCSSを当て込む必要がありますでしょうか。

回答 (全1件)

  • 回答No.1

ベストアンサー率 45% (5062/11035)

 スクロールバーは内容がはみ出ない限り表示されませんし、スクロールバーはブロックの内側に現れますから、firefoxの解釈が正しいのですが、それを回避する為にはブレークポイントのサイズを655pxとか660pxにするのが簡単です。
 パソコンなどのディスプレイでその幅で見ることはありませんので。

 なお当然ですが、いずれもリキッドデザインが原則です。パソコンなどの小さなディスプレイでmediaqueryが無効であっても、リキッドで追随していくが、限界を越すと(mediaqueryに対応した端末では)デザインを切り替えると考えます。
 例えば、ブレークポイントまでは、3カラムの配置でウィンドウ幅に合わせて伸縮しますが、それを越えて小さくなると2カラムに変化する。(もちろん携帯電話などでは、1カラムですが)
HTML5として

<header></header><!-- HTML4なら <div class="header"> -->
<section><!-- HTML4なら <div class="section"> -->
 本文
 <nav>ナビ</nav>
 <aside>補足</aside>
<section>
<footer></footer>
だとして
パソコン
┌──────┐
│HEADER│
├─┬──┬─┤
│N│本文│補│
│A│本文│足│
├─┴──┴─┤
│FOOTER│
└──────┘
スマホ↓
┌───┐
│HEADER│
├─┬─┤
│N│本│
│A│文│
├─┴─┤
│補足?│
├───┤
│FOOTER│
└───┘
のように切り替えると良いでしょう。
お礼コメント
webama_fk

お礼率 91% (117/128)

ORUKA1951 様

ご丁寧に解説頂きありがとうございます。
大変参考になりました。
投稿日時:2013/07/30 11:17
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

ピックアップ

ページ先頭へ