0

大画面（キオスクなど）で使用するための HTML 要素のスケーリングに関するいくつかのオプションを探しています。私は現在、CSS3 scale() を使用して比較的クロスブラウザーのスケールを取得しています (cssplease のおかげです) が、他の誰かがより良い提案を持っているかどうかを確認しています。

主に、大規模な (たとえば 400x200px から 800x500 まで) ウィジェット (HTML、js、および画像) のレンダリングを検討しています。各ウィジェットを大規模に書き直すことはできますが、オプションを確認してみようと思いました。

SVG でできること、またはキャンバスはありますか? CSS3 の scale() は問題ありませんが、画像を高解像度バージョンに置き換える必要があります。テキストの間隔もわずかにずれているようです。

ありがとう！

4

3 に答える 3

1

CSS3 Transforms は、私が望むもの、特にブラウザーのパフォーマンスにとって、依然として最良の選択肢です。

于 2012-10-11T22:56:24.153 に答える
0

これは大がかりな改造になるかもしれませんが、ems を使用して要素の寸法を定義し、メディア クエリを使用して、さまざまな画面サイズのベース フォント サイズを大きくすることができる場合があります。したがって、ベース フォント サイズが 16 ピクセルの場合、メイン コラムは 47 エム、サイドバーは 12 エムで、おおよそのサイト幅は 1000 ピクセルになります。その後、メディア クエリを使用してより大きなブラウザーを検出できます。ベース フォント サイズを 20px に増やすだけで、サイトが 25% 大きくなります。

于 2012-04-16T16:17:21.177 に答える
0

理解できたかどうかはわかりませんが、ウェブサイト、画像、動画などをどの画面でも（解像度を問わず）見栄えよくする必要がある場合は、レスポンシブ デザインを試すことができます。css メディア クエリを使用して、さまざまな画面解像度に合わせて Web サイトを調整するオプションがあり、元の画像品質なども維持されます。

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

私はそれらが非常に役立つことを発見し、一度理解すれば、スケーラブルな Web サイトを簡単に構築できます ;))

于 2012-04-16T15:47:16.593 に答える