1

15X15の行と列を持つチェスボードタイプのテーブルを作ろうとしています。私の問題は、携帯電話のすべての解像度でこのテーブルを柔軟にする必要があることです。各テーブルの列は、異常に伸びてはいけませんが、デバイスの解像度に関しては伸びるはずです。私は CSS に非常に慣れていないので、幅と高さを 100% スケールでチェス盤のテーブルを調整できる方法があるかどうか知りたいです。これは、私が 480X854 と 320X480 の解像度で作成している通常のチェス盤です。

ここに画像の説明を入力

もう1つ、テーブルの幅と高さをピクセル単位で使用すると、特定の解像度でうまく機能しますが、テーブルtrでパーセンテージを使用しても結果は得られず、すべてが異常に縮小します。この状況で皆さんが使用する最善の解決策は何か、またはモバイル jQuery に関連するものがあるかどうかを確認したいと思います。もっと説明する必要があるかどうか教えてください

プレビュー用のjsfiddleは次のとおりです。

jsfiddle.net/97Nz5

4

1 に答える 1

1

質問にjQueryのタグを付けたので、それを使用していると思います。純粋なcssでそれを行う方法はないと思います。

$(function(){

   var $gameboard = $('#gameboard-terrain');
    var $cells = $gameboard.find('td');

    var adjustHeight = function(){
        var width = $cells.width();
        $cells.height(width);
    };

    $(window).resize(function(){
       adjustHeight(); 
    });
    adjustHeight();

});

デモはこちらhttp://jsfiddle.net/97Nz5/3/


編集
あなたは正しい私の機能は、セルの高さが幅と等しくなるように調整するだけです。異なる解像度で異なるセル サイズを出力するために使用する必要があるのは、css メディア クエリです。たとえば、次のようにします。

@media (max-width: 479px) {
    table {
        width: 480px;
    }
}

デモhttp://jsfiddle.net/97Nz5/8/

于 2013-09-05T11:03:22.630 に答える