-1

このページでは、ウィンドウをドラッグするとすべてが間違ったサイズになることに注意してください。

拡大または縮小したときに、「iframe」が1.778（640 * 360、1280 * 720など）の比率を維持するようにします。(ユーザーがウィンドウを外側にドラッグすると、ウィンドウが大きくなります。ユーザーがウィンドウを内側にドラッグすると、比例して小さくなります。)

ページを囲む「境界線」を常に 8px x 8px にしたい。（マージンを使用する際の問題は、ウィンドウのサイズが大きくなり、ユーザーがスクロールする必要があることです。-私の目的では、これが発生したくありません。）

最後に、ウィンドウに合わせてテキストのサイズを増減する必要があります。(現在、これを達成するために「%」を使用していますが、明らかに「%」はフォントサイズのコンテキストで「フォントサイズを親要素のフォントサイズのパーセンテージに設定する」ことを意味します。したがって、別のものが必要になりますここにアプローチします。）

4

2 に答える 2

1

編集：

要素のサイズのみを考慮している場合は、body要素のサイズをwidth：100％に設定します。すべての子要素のサイズをピクセルではなくパーセンテージで設定します。その後、何もする必要はありません。さまざまなサイズの画面でレイアウトが自動的に変更されます。

または、最新のブラウザー（つまり、電話やタブレット）のみをサポートしている場合は、単純なCSS3行（transform：scale（））を使用できます。次に、必要なサイズでiFrame（または他のオブジェクト）を作成し、必要に応じて拡大または縮小できます。

http://www.w3schools.com/cssref/css3_pr_transform.aspを参照して ください

または、emsまたはremsですべてのフォントサイズ、要素サイズ、パディング、およびマージンを指定できます。次に、emまたはremベースを変更するだけで、すべての要素がそれに応じてスケーリングされます。

scale（）、ems、またはremsを使用するには、次の2つのオプションがあります。

（1）JavaScript：サイズ変更リスナーをWindowオブジェクトにアタッチして、画面サイズが変更されたときにbody要素のプロパティを設定します。

（2）画面サイズごとに異なるCSSファイルを使用します。唯一の違いは、body要素のルールにあります。参照： http ：//css-tricks.com/resolution-specific-stylesheets/

于 2012-12-15T16:14:13.257 に答える
1

jquery を使用してサイズ変更イベントをウィンドウにバインドし、サイズ変更する要素に適切な変更を加える必要があります。

$(window).resize(function() {
    var currentwidth = $(this).css('width'); //just one way to get the window width
    var scaledwidth = parseInt(currentwidth) * 0.75; //calculate a new width
    $('#iframeId').css('width', scaledwidth); //one way to set an element's width (iframe in this case)

/* Do your other element re-sizing here. */
}

この行var scaledwidth = parseInt(currentwidth) * 0.75;はparseInt、現在の幅から「px」を取り除くために使用します。

于 2012-12-15T15:43:12.150 に答える