-4

1280x1024 の画面解像度で問題ないように見えるこのサイトで作業していますが、画面解像度を 1280x768 に変更すると、まったくひどいものになります。

ここで私が取り組んでいるサイトを表示できます: http://tinyurl.com/d3xhfdq

4 つの div (mainWraper、ヘッダー、コンテンツ、フッター) があります。

サイトを任意の画面解像度に適合させるための適切な手順は何ですか?

私がする必要があるのは、mainWraper 内のすべてを任意の画面サイズに収めることです。

ありがとう

4

3 に答える 3

1

CSS3 メディア クエリを使用します。通常、最小幅または最大幅を指定してデザインを定義しますが、高さを使用することもできます。

たとえば、ウィンドウの高さが 768px 以上の場合は特定の CSS を実行し、ウィンドウの高さが 768px 未満の場合は別の CSS を実行するメディア クエリを作成できます。

   @media screen and (min-height: 768px) {
    #mainWraper {
      /* your code here */
    }
  }


   @media screen and (min-height: 0px) {
      #mainWraper {
        /* your code here */
      }
   }

次のように、html のヘッドでメディア クエリを呼び出すこともできます。

<link rel="stylesheet" media="screen and (max-width: 960px)" href="myStylesheet.css" />
于 2013-04-05T17:45:41.807 に答える
1

メディア クエリの使用に加えて、次の使用も忘れないでください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

上記のコードは (もしよろしければ) Apple によって開発されたものであり、Apple の iPhone を作成し、タブレットがデスクトップ用に作成されたページをレンダリングするにつれて勢いを増しています。

于 2013-04-05T17:42:34.573 に答える