2

私はウェブアプリの開発に忙しいのですが、画面に収まるようにすべてのアイテムを拡大縮小する正しい方法を見つけることができないようです。

ここに画像の説明を入力

写真でわかるように、灰色のバーはメニューであり、所定の位置に留まる必要があります。中央のコンテンツ (白い背景を含む青いブロック) は、左右だけでなく上下にも移動する必要があります。ウィンドウのサイズ変更、ズーム、その他すべてを考慮する必要があります。私の現在のテクニックは何度も失敗するので、誰かが良いテクニックを知っていることを願っていました.

先ほど言ったように、コンテンツは上下左右に移動する必要があります。すべてのページの親 div は、すべてのページが一緒にあるのと同じ幅です。したがって、1 ページには正しいウィンドウ幅が必要です。高さについても同様ですが、横軸は 2 ページしかありません。現在、JavaScript/JQuery を使用してサイズを調整しています。

補足として、現在のコンテンツ ページが画面に表示できるサイズよりも大きい場合、垂直方向にスクロールできる場合があります。横スクロールはできません。

説明するのは非常に難しいです。最善を尽くしていますが、誰かが私を助けてくれることを願っています。

4

1 に答える 1

0

それはとても楽しいです！おそらく em 単位での作業が役に立ちます。巧妙な小技です。

1 - 親コンテナーで font-size を 100% に設定します。

2 - すべての子要素で、すべての寸法、パディング、マージン、ボーダー、フォント サイズなどに ems を使用します。

3 - Javascript では、ページの読み込み時にブラウザーのサイズを取得し、後で使用できるように変数に保存します。

4 - ウィンドウのサイズ変更イベントをセットアップします。ウィンドウのサイズが変更されたら、新しいブラウザーのサイズを取得します。ここで、いくつかの基本的な計算により、新しいブラウザーのサイズを元のブラウザーのサイズと比較して、パーセンテージを得ることができます。

5 - まだサイズ変更イベントで、その新しいパーセンテージを親要素の font-size に設定します。

これは、センター コンテナーだけでセットアップできます。font-size プロパティを持つ (および em で定義されている) メイン コンテナーのすべての子要素は、ブラウザー ウィンドウに合わせて自動的にスケーリングされます。

テキストはスケーリングされます 境界線のサイズはスケーリングされます 境界線の半径はスケーリングされます 寸法、パディング、マージンはスケーリングされます

ネイトです。

于 2013-02-25T03:09:58.667 に答える