2

現在、とに基づいて、ウィンドウのサイズ変更イベントでjQueryを使用して一部の要素の幅と高さを設定していwindow.innerWidthますwindow.innerHeight。

このようなもの：

$(".gr1").css("height", (window.innerHeight - 150) + "px");

そして、これらはいくつかの他の例です：

$(".gr2").css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(".box1").css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(".box2").css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");

これは、Chrome 21 (Windows) でのレンダリングが少し遅く、iPad と Nexus 7 タブレットでのレンダリングが遅すぎます。gr1( 、gr2、クラスbox1を持つ要素が多いため)box2

パフォーマンスを向上させるために Pure CSS でこれを行うことはできますか? どのように？

4

4 に答える 4

6

HTML や CSS を見ないと決定的な答えを出すことはできませんが、ブラウザ ウィンドウのサイズ変更に対応するページの要素が必要な場合の最善の解決策は、% widths を組み合わせて使用​​し、min-width具体max-width的なサイズ制限を設定することです。 .

于 2012-09-03T12:51:29.917 に答える
4

jQueryセレクターをキャッシュして、パフォーマンスを向上させることができます：

var gr1 = $('.gr1');
var gr2 = $('.gr2');
var box1 = $('.box1');
var box2 = $('.box2');
$(gr1).css("height", (window.innerHeight - 150) + "px");
$(gr2).css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(box1).css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(box2).css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");
于 2012-09-03T12:51:37.450 に答える
3

You could try using calc(), but the support is not very good (limited to IE9+, FF4+, Safari 6, Chrome 19+ & Firefox for Android).

Test: http://dabblet.com/gist/3609183

于 2012-09-03T12:54:19.753 に答える
2

メディア クエリは、「純粋な」CSS の定義にもよりますが、メディア クエリは CSS3 にとって新しいものであり、IE 6/7/8 では完全には機能しないため、おそらく進むべき道でしょう。

わからない場合は、画面/デバイスの現在の解像度に基づいて特定のスタイルを適用するだけで機能します。例を見て、ウィンドウのサイズを変更して、コンテンツがどのように変化するかを確認できますか?

これは、レスポンシブ Web デザインと呼ばれます。

于 2012-09-03T12:52:41.370 に答える