-5

私はウェブサイトをデザインするのが初めてです。Linuxでクロムを使用しています。そして、Windowsのクロムで自分のウェブサイトをテストしました。高さと幅が異なるなどの問題が1つありますか？Web サイトのデザインをすべてのブラウザーに対応させる方法。この問題が単位で発生する場合、em、px、または % のどの単位が最適ですか?

4

2 に答える 2

2

これは実際の設計上の選択です。固定サイズを使用するか、サイトを流動的にすることができます。

固定サイズとは、デザインしたい幅を定義することを意味します。非常に人気のある選択肢は 960px でした。これは、幅 1024px の画面と互換性があり、側面とスクロールバーに余裕があるためです。

この方法を選択した場合は、サイト全体にラッパー要素を配置する必要があります (たとえば、タグの<div id="wrapper">直後<body>、ドキュメントの最後で閉じます (基本的にすべてのサイトがそこに入ります)。その後、CSS ルールを設定できます。 :

#wrapper { 
  width: 960px; 
  margin: 0 auto;
}

これにより、サイト全体が画面上で水平方向に中央揃えになります。この方法の利点は、幅がわかっているため、内部の要素 (サイドバーなど) の幅を簡単に測定および計算できることです。これは、広告の配置を扱う場合に非常に便利です。

Fluid サイズとは、使用可能な画面領域のパーセンテージとして幅を定義することを意味します。この方法は、以前は主に全幅のサイトで使用されていました (#wrapper上記の要素が に設定されていると想像してくださいwidth: 100%。私の個人的な意見では、この方法自体は面倒で、特殊な場合にのみ適用できます。

最後になりましたが、現在のトレンドはレスポンシブ デザインです。このメソッドは、CSSメディア クエリを使用して、利用可能な幅に応じてさまざまなスタイルを読み込みます。特定の実装では、上記のいずれかを使用できます。

于 2013-04-10T06:20:50.873 に答える
0

異なるブラウザ間で同じ問題が発生しました。最後の手段として、サイズの変更が見つかった各ブラウザー ペアに対して css ハックを使用してみることができます。

例: これは の簡単なハックですIE。css の前にアンダースコア (_) を追加します。

_height:200px;

このサイトを見てください。

お役に立てれば ：）

于 2013-04-10T06:23:27.277 に答える