コンピューターの CSS 絶対位置をさまざまな解像度で正常に表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

コンピューターの CSS 絶対位置をさまざまな解像度で正常に表示するにはどうすればよいですか?

小云云

リリース： 2017-12-12 09:34:24

オリジナル

1513 人が閲覧しました

この記事では、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 を除き、他のブラウザは正常に動作します。ズーム属性がサポートされており、スケーリングする必要があるページのブロック全体が現在の解像度に合わせてスケーリングされます。Transform:scale は、最初に元のページが拡大されたかのようにページを表示し、その後、縮小を使用します。現在のページに移動します。縮小効果が得られると、両側は当然空白のままになります。