CSS での絶対位置指定はどのようにしてすべての解像度と互換性を持たせることができますか?

今回は、CSS の 絶対配置 がどの解像度にも対応していることを説明します。 CSS の絶対配置がすべての解像度に対応するための 注意点 は何ですか? ここで実際のケースを見てみましょう。

ページを書いていると、絶対に配置されている親要素が相対的に配置されていることに気づくことがありますが、解像度が異なるコンピューターでは、親の相対的な配置が依然として混乱しているようです。役割を果たしていない。

まず、次の原則を理解する必要があります:

1. ラップトップの解像度は通常約 1366*768、PC の解像度は通常 1920*1080 です

一般的なコンピューターの解像度は次のとおりです。

Web ページを書くとき、1920 などの大きな解像度で書いた後、同じ Web ページを小さな解像度のラップトップで表示すると、ラップトップは基本的にワイドスクリーンで表示されることがわかります。 Webページを1.5倍に拡大して表示 約2倍の表示効果。

2. 異なる解像度でページを正常に表示するには、通常、幅 1920 ピクセルのページを作成する場合、中央に安全な幅が約 1200 ピクセル必要です。ページ全体をカバーする必要がある背景画像またはカルーセル画像がある場合は、解像度を下げたときに中央揃えに設定する必要があります。背景画像またはバナー画像 1200 左、右、中央 幅ボックスは依然として中央に配置され、左右に偏ることはありません。 ボックス内の p などの小さなボックスは、ページ適応を達成するためにパーセンテージとして表すことができます。

絶対配置の使用:

絶対配置を使用する場合、異なる解像度の下で配置が混乱しないように、要素の親要素を相対配置に設定する必要がありますが、前提として、親要素が相対配置に設定されている必要があります。要素が安全な幅内にある場合、親要素自体が解像度の低下により変化する要素である場合、間違いなく位置が崩れます。

ページ構造をレイアウトする場合、安全な幅 1200px の p など、いくつかのボックス フレームが不可欠です。

例: このページの背景が大きな画像であるイベント ページを作成します。この大きな画像にいくつかの小さな画像を配置する必要があります。大きな画像を直接使用することはできません。背景！

代わりに、拡大画像の背景の p に安全な幅 p を引き続き入れてから、それを親要素として相対位置決めし、内部の子要素の絶対位置決めとして使用します。これにより、混乱が生じなくなります。異なる解像度での絶対位置の問題。

ネチズンの経験を要約すると、zoom

属性

を追加すると、さまざまな解像度に応じてページの特定のセクションを適切な領域に自動的にズームできます。ただし、

Firefoxブラウザにはバグがあります。はこの属性をサポートしていません。transform:scale(x,y) 属性を使用しても役に立ちません。また、ページの読み込みが遅い場合、ページを更新すると、最初に拡大された効果が表示され、その後、しばらくの間点滅するという小さな問題もあります。もっと詳しい友達がお互いにコミュニケーションできることを願っています。 zoom コードは次のとおりです:

$(function(){        var w=window.screen.width;        var zoom=w/1920;

$("#container").css({
        "zoom",zoom,
        "-moz-transform":"scale("+zoom+")",
　　　　　　"-moz-transform-origin":"top left"
      });
 });

zoom: 現在の画面解像度幅/1920;

zoom 属性に対するブラウザのサポート:

結果は次のようになります: Firefox を除き、他のブラウザはzoom 属性をサポートできます。通常 、スケーリングする必要があるページのブロック全体が現在の解像度に適応するようにスケーリングされますが、transform:scale は最初に元のページを拡大したようにページを表示し、次にスケールを使用します。その後、縮小は縮小と同等になります。現在のページの効果により、両側は当然空白のままになります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSSで0.5ピクセルの線を作成する方法

Css3トランジションスムーズトランジションメニューバーの実装

以上がCSS での絶対位置指定はどのようにしてすべての解像度と互換性を持たせることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。