4

不明なウィンドウ サイズをターゲットとする小さな Web アプリケーションを多数開発しています。この問題を解決するために、非常に大きなレイアウトを開発し、ウィンドウ サイズに合わせてスケーリングしています。

ただし、私の解決策には不便があります。すべてのサイズを変更すると、(主にテキストのスケーリング時に) 少しずれて目立ちます。私のコードは非常にシンプルで、ページ内のすべてが絶対的に配置されているため、倍率を取得して、ページ内のすべての div/img/span/input のすべての位置と幅/高さに適用するだけです。コードは次のとおりです。

function resize()
{
    var wh = $(window).height();
    var h = maxHeight;

    var ww = $(window).width();
    var w = maxWidth;

    var wProp = ww / w;
    var hProp = wh / h;

    if (wProp < hProp) prop = wProp;
    else prop = hProp;

    if (prop > 1) prop = 1;

    console.log(prop);
    $("div").each (applyNewSize);
    $("img").each (applyNewSize);
    $("span").each (applyNewSize);
    $("input").each (applyNewSize);
}
//this is run when the page is loaded
function initializeSize (i)
{
    this.oX = $(this).position().left;
    this.oY = $(this).position().top;
    this.oW = $(this).width();
    this.oH = $(this).height();
    if ($(this).css("font-size") != undefined)
    {
        this.oFS = Number($(this).css("font-size").split("px")[0]);
    }
}

function applyNewSize (i)
{
    if (this.oFS != undefined) $(this).css("font-size", Math.round(this.oFS * prop) + "px");
    $(this).css("left", Math.round(this.oX * prop) + "px");
    $(this).css("top", Math.round(this.oY * prop) + "px");
    $(this).width(Math.round(this.oW * prop));
    $(this).height(Math.round(this.oH * prop));
}

この問題は、この 1 週間、私を苦しめてきました。これに対する回避策または解決策はありますか？

4

1 に答える 1

1

レスポンシブ Web デザインについて読むことをお勧めします。

正確なピクセルの代わりに % を入れて動作します:

 <div class="container"> 
  <section>
    THIS IS THE SECTION
  </section>
</div>

CSS::

.container{
  width: 80%; // 80% instead pixels
  background: gainsboro;
  border: 3px inset darkgrey;
  height: 200px;
  margin:auto;
  text-align:center;
}


section{

  width: 80%; // 80% instead pixels
  height: 80%; // 80% instead pixels
  background: darkgrey;
  margin:auto;


}

次に、メディア クエリも使用して、ブロックを再割り当てしたり、さまざまな幅にさまざまなスタイルを適用したりできます。

チュートリアルの例: http://css-tricks.com/css-media-queries/

于 2014-01-24T16:09:46.750 に答える