带有空单元格的HTML棋盘表必须以多种分辨率进行调整

Question

我正在尝试制作15X15行和列的棋盘类型表。我的问题是我需要使用移动电话的所有分辨率使这个表灵活。每个表的列不应该得到异常拉伸，但应该在设备分辨率方面拉伸。我是CSS的新手，我想知道是否有任何方法可以调整棋盘表的宽度和高度为100％。这是我在480X854和320X480的分辨率下创建的普通棋盘。

当我在像素中使用表格宽度和高度时，还有一件事可以解决任何特定分辨率的问题，但是在表格tr上使用百分比不会产生结果但会异常收缩所有内容。我想看看在这种情况下你们将使用的最佳解决方案是什么，或者移动jQuery是否有与之相关的任何内容。如果我要解释更多，请告诉我

以下是用于预览的jsfiddle：

jsfiddle.net/97Nz5

Answer 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 queries。例如：

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

演示http://jsfiddle.net/97Nz5/8/