私の「レスポンシブ Web デザイン」のコンセプトは次のとおりです。
- あらゆる幅のモニターやメディア画面にうまく収まる Web レイアウトをデザインします。
- あらゆる幅のモニターやメディア画面に合わせて圧迫する Web レイアウトを設計します。
- どのデバイスでも適切に表示される Web レイアウトを設計します。
%ピクセル ( ) ではなくパーセンテージ ( ) でレイアウトを設計しますpx。
一般的な概念の後、私はいくつかの概念を所有していましたが、今この時点で、私は混乱しています:
- レイアウトとして何でもデザインし、マウス ホイールをスクロールして、さまざまなメディア画面幅で伸縮したり縮小したりしたときにどのように見えるかを確認します。何でもデザインしてから、さまざまなメディア画面/デバイス幅に合わせて CSS を実行します。これを行うには、 を使用して、レイアウトの任意の要素に新しい
@media screen and (max-width: 800px) { /* do Media CSS here; */ }CSS を追加します。（ですから、メディアクエリで何でもできるようになったら、簡単にデザインしてください。コンピューターモニターのデザインが完成したら、デバイスまたは小さなメディア画面に重点を置いて、CSS で遊んでください ）320px 幅は好きなように指定できます。
style.cssheader .somediv{ width: 100%; }@media screen and (max-width: 800px) { header .somediv{ width: 50%; } } - レイアウトから何かが飛び出している場合は、フロートをクリアして、メイン コンテナーの前または後にスタックに配置します。
- で画像のレスポンシブ CSS を行い
img{ max-width: 100%; }ます。
レスポンシブの世界での私の満足と進歩のために、私はあなたに私を批判してもらいたいです-私が上記のように考えている場合、レスポンシブ CSS について何が間違っているのでしょうか?
または、私はコンセプトに完全に問題がなく、なぜ私のサイトは 800px ではなく 320px で壊れており、320px だけに別の CSS を適用することはできません. ヘッダーの高さを 320px でしか適用できないのに、なぜ800px で指定しなければならないのですか?