1

初めてのレスポンシブ プロジェクトで、思ったほどスムーズではありません。

768 と 480 にブレーク ポイントを設定して最初のコンセプトを完成させましたが、ブラウザでサイズを変更すると問題なく動作します。スマートフォンで最終テストを行い、完全なサイトを取得しました!

私は頭を壁にぶつけていて、誰かが私を救ってくれることを願っています!

ここでページを見ることができます - www.siphon-marketing.com/unifirst

また、デスクトップで画面のサイズを変更すると問題が発生しますが、各ポイントで更新していくつかの要素を強制的に配置する必要があります...それを防ぐ方法はありますか?

本当にありがとう！

4

3 に答える 3

1

メタ ビューポート タグを使用します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

こちらをご覧ください

于 2012-09-14T21:02:29.833 に答える
0

メディアクエリで、.container widthと.header widthを100％として定義しました。私はこれに前向きではありませんが、これが起こっていることだと思います。最初.containerはに設定されていwidth: 1000px;ます。この時点で、モバイルデバイスはこれをデスクトップに焦点を合わせたWebページと見なしています。大きなウェブページをレンダリングする場合、モバイルブラウザはすべて異なる機能を備えています。画面に合わせてテキストをリフローしようとするものもあれば（他の要素が通常のデスクトップ位置にある場合）、ビューポートの幅全体に合わせてページをズームアウトするものもあれば、何もしないためにページをズームアウトするものもあります。ページ全体をパンおよびズームします。

メディアクエリは、さまざまなサイズのビューポートでレスポンシブデザインを強制するのに適しています。これらのスタイルは、メディアクエリの外部でこれらのオリジナルを上書きしますが、モバイルブラウザがページの幅が最初に1000ピクセルであると判断した場合、ページは1000ピクセルに「拡張」されます。メディアクエリが100％と言うことを上書きする場合、ブラウザはそれを「1000pxの100％」を意味するものとして扱っている可能性があります。

メディアクエリでピクセル幅を定義してみて、それが役立つかどうかを確認してください。これが正確であれば、メディアクエリで次のように言うことができるでしょうか。

.container {
  width: 480px;
  width: 100%;
}

繰り返しますが、私はこれをテストしていませんが、アイデアはうまくいくようです。これが役立つかどうかを確認したいので、試してみたらコメントして知らせてください。ありがとう！

于 2012-09-14T20:53:58.340 に答える
0

2 つのビューポートがあることがわかりました...一方が他方をオーバーライドしています

于 2012-09-17T13:41:25.043 に答える