6

要素のホイールがあるページがあり<div>、ボタンをクリックするとホイール全体が回転します。

この効果は、本質的に絶対的な CSS 変換を使用して実現します。ただし、ホイールは非常に大きく、HD ディスプレイでは見栄えがしますが、画面が小さいと端が切れてしまいます。通常のレイアウトのように % 幅を使用することはできません。必要なのは、ほとんどのブラウザのズーム機能と同じようにページ全体を縮小することです。

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

ラッパー div で使用-browser-transform: scale(amt);して必要な効果を得ることができることはわかっていますが、動的に行う方法がわかりません。スケールを 0.5 に設定すると、画面に関係なく 0.5 になります。どの画面でも、ホイールの端を画面の端から数ピクセルだけ離したいです。メディア クエリを使用して問題を解決できることはわかっていますが、理想的とは言えない結果が残るか、さまざまなクエリが必要になりすぎます。プログラムで変更する方法-browser-transform: scale(amt);、または有限の制御を行うその他の方法が必要です。

何かご意見は？

4

1 に答える 1

0

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

これは、さまざまな画面サイズで必要な動的スケーリングを実現するのに役立ちます。デモが必要な場合は、それを示す jsfiddle を喜んで作成します。

于 2012-09-04T15:00:27.760 に答える