1

我正在尝试制作具有 15X15 行和列的棋盘类型表。我的问题是我需要让这张桌子灵活适应手机的所有分辨率。每个表的列不应异常拉伸，但应根据设备分辨率进行拉伸。我对 CSS 非常陌生，我想知道是否有任何方法可以调整棋盘桌的宽度和高度为 100%。这是我在 480X854 和 320X480 分辨率下创建的普通棋盘。

在此处输入图像描述

当我以像素为单位使用表格宽度和高度时，还有一件事适用于任何特定分辨率，但在表格 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 回答