12

多くの人のHTMLマークアップは次のようになります。

<html>
  <body>
    <div id="wrapper">
      <p>Stuff in here</p>
    </div>
  </body>
</html>

#wrapperそして、ほとんどの場合、ここの例やWebでは、幅の設定を。ではなく、に適用する必要があると言われています<body>。

その根本的な理由はありますか？

たとえば、メディアクエリを適切に劣化させるための手法に関する記事で、手法1：何もしない：に関するコンテキストを提供します。

部屋の中の象はデスクトップ用のInternetExplorerです。モバイルファーストのソリューションでは、大画面でコンテンツが1列に表示されるため、快適さのために確立された最大値である50〜75文字をはるかに超えて、ユーザーにとって苦痛な読書体験がもたらされます。 メインコンテナでmax-widthプロパティを設定してから、メディアクエリでそのmax-widthを増やすことをお勧めします。

そして彼らのCSS：

#wrapper {
 _width: 460px; /* Take that, IE6! */
 max-width: 460px;
}

@media only screen and (width) {

#wrapper {
  max-width: 1200px;
 } 
}

IEでどのようにまとめられるかを次に示します（メディアクエリはコメント化されています）。

標準のWebサイトを念頭に置いて、#wrapperそれをに適用する代わりに、に適用するという違いはありますか？<body>

潜在的なバグはありますか？ここで試してみましたが、大丈夫そうです。レイアウトがさらに高度になった場合はどうなりますか...

4

1 に答える 1

4

ええと、あなたは私が推測するできるだけ少ない要素を使いたいです。ただし、＃page-wrapperとbodyが交換できない場合が多くあります。多くの場合、htmlタグの代わりに本文を背景色として使用する必要があります。これらの場合（たとえば、重み付けされたフッター）、HTMLを引き伸ばすために本体が必要であり、コンテンツを含むラッパーが必要です。コンテンツを中央に配置し、本体を引き伸ばして含めるように強制します。

つまり、ほとんどの人は、ファーストクラスまたはオンラインチュートリアルで見たため、ラッパーを使用していると思います。ほとんどの場合、それは多くの人の習慣だと思います。ボディはそのままにして、ラッパーを0 autoにマージンし、最大幅を使用します。EI 8以前です-メディアクエリを使用できますか？-EI 8を検出して、独自のスタイルシートを作成する必要があるかもしれません。モービルのすべてを定義した後、私のメディアクエリはその後数行の反復であることがわかりました-

于 2012-11-05T03:22:12.450 に答える