CSSトランスフォームまたはjavascriptを使用して、親に合わせて要素を拡大/縮小します。

ボタンをクリックすると、ホイールが<div>の要素を持つページがあります。CSSトランスフォームまたはjavascriptを使用して、親に合わせて要素を拡大/縮小します。

私は、本質的に絶対的なCSS変換を使用してこの効果を達成します。しかし、ホイールは非常に大きいです、私のHDディスプレイ上でいいように見えますが、画面が小さくなるとエッジが途切れてしまいます。私は通常のレイアウトでできるように％幅を使用することはできませんが、私が必要とするのは、ほとんどのブラウザズーム機能が動作するのと同じ方法でページ全体を縮小することです。

私自身、私はページ全体を見ることができるようにctr + mouseWheelがページをズームアウトすることを知っていますが、他の人がこれをすることは期待できません。

私は、私が望む効果を得るためにラッパーdivに-browser-transform: scale(amt);を使用できますが、私はそれを動的に行う方法を見つけられません。スケールを.5に設定すると、スクリーンに関係なく.5になります。私はホイールのエッジを、画面の端から数ピクセルにする必要があります。私は、問題を解決するためにメディアクエリを使用することができることを知っていますが、理想的ではない結果を出すか、あまりにも多くの異なるクエリを必要とします。プログラムによって-browser-transform: scale(amt);を変更する方法、または有限の制御を持つ他の方法が必要です。

どのような考えですか？

出典

2012-04-30 zeel

まあ、私はこれにタンブルウィードを手に入れました。誰も手がかりを得ていませんか？ – zeel

ホイールの（一部）の絶対的なサイズはありますか？これは、小さな+実例を質問に追加すると役立ちます。コードがどのように見えるか想像するのは少し難しいです。 - どのような場合でも、私はそれを読んでいる方法、あなたは固定されたホイールのサイズと固定（しかし、正面の前に）ブラウザのサイズを持っている場合は、スケールを決定するためにJavaScriptが必要になります。 – Jeroen

あなたはビューポートのサイズに基づいて 'amt'を計算したいと言っていますか？ –

cssでメディアクエリを使用して、さまざまな画面をターゲティングしてみましたか？たとえば、320〜480ピクセルの幅で、このホイールを含むdivが50％にスケールされていることを示すcssファイルのメディアクエリがあります。次に、481〜768ピクセルで、divコンテナは75％にスケーリングされます。 769ピクセル上から、divは100％にスケーリングされます。

これは、さまざまな画面サイズで必要な動的スケーリングを実現するのに役立ちます。デモをご希望の場合、私はそれを示すjsfiddleを作ってうれしいです。

出典

2012-09-04 15:00:27

技術的にはうまくいくものの、容認可能な偏差内で外観を維持しながら、幅広い画面サイズを考慮するには多くのメディアクエリが必要になります。そして、誰もが画面いっぱいにブラウザを表示しているわけではないことを覚えておいてください。可能なサイズの数ははるかに大きいです。一言で言えば、余りにも多くの冗長性、メディアクエリは優雅な解決策ではありません。 – zeel

必ずしも必要ではありません。たとえば、1920x1080モニタを分割スクリーニングすると、1920x540になります（最小幅：481pxおよび最大幅：768px）。範囲を使用する場合は、その範囲を必要としません。まず、Googleアナリティクスを使用して1週間ほど基本サイトを開始し、人々がどのような決議でサイトを訪れているかを見て、そのほとんどをデザインします。また、待たされたくない場合は、320x480,800x480,960x640,1024x768,1600x900,1920x1080など、最も一般的なデザインをお試しください。そして、各画面サイズに対して新しい小数点をシミュレートして書くことはそれほど多くの仕事ではないことを忘れないでください。 –

私はあなたのためにこれをやっているjsfiddleにしたい、私の応答と私の前に私のコメントであなたの上に記載されたもの以外の心にサイズがありますか？そしてすでに作成されたホイールでフィドルがありますか？ –

CSSトランスフォームまたはjavascriptを使用して、親に合わせて要素を拡大/縮小します。

答えて

関連する問題