0

カレンダーとして使用している HTML テーブルがあります。通常、このカレンダーは 690 ピクセル幅で表示されるため、各列は 98 ピクセル幅 (690 / 7 = 98) になります。各日付を正方形にしたいので、高さも 98 ピクセルです。

すべての日付で使用される CSS クラスがあります。これには、高さプロパティが 98 ピクセルに設定されています。下部には、ユーザーがカレンダーを全画面表示できるボタンもあります。つまり、テーブルの幅は 100% に設定されます (画面解像度がすべて異なるため)。しかし、繰り返しになりますが、すべての日付が正方形である必要があります。したがって、画面解像度の 14% を計算するには、JavaScript または (できれば) jQuery が必要です (7 日で、画面全体が 100% であるため、各列は 14% になります)。

CSSの高さプロパティを計算されたものに変更するため、これにはjQueryの方が適していると思いますが、JavaScriptも機能します。

私は jQuery について何も知りませんし、JavaScript でこれを行う方法も知りません。

4

2 に答える 2

0

jQuery を使用すると、非常に簡単です。ウィンドウを知りたい場合は、使用できます

var screenWidth = jQuery(window).width()

すべての日付には特定のクラス (.dateElement など) があるため、jQuery を使用してすべての日付のサイズを変更できます。

jQuery('.dateElement').width(screenWidth * 14 / 100).height(screenWidth * 14 / 100);

関数のサイズが変更され、jQuery にそのための非常に優れたイベントがある場合は、このコードを呼び出す必要があります。

jQuery(window).resize(function(){// Your code });

これがファビオに役立つことを願っています

于 2013-02-21T22:52:20.127 に答える
0

ウィンドウのサイズがいつ変更されるかを確認するには、おそらく window.innerWidth と $(window).on('resize', fn) イベントが必要です。

しかし、より良い方法は、幅をコンテナーの 14% に設定するクラスを追加することです

于 2013-02-21T22:53:59.380 に答える