如何以不同的分辨率缩放表格

Question

这是我的网站：http://livyscupcakery.bitballoon.com/

在移动版本上（我正在使用 iPhone 5 查看该网站），“产品”和“联系方式”页面上的表格在 Chrome 上的屏幕分辨率 (~2000x1000) 之外的其他任何东西上看起来都不好。

我需要一些有关如何缩放“产品”表的帮助，以便将其固定在其周围的框上并根据不同的分辨率进行自我调整（例如，在某些分辨率下，只有一行，然后是两行行，然后是三个）。再说一次，在移动设备上的“联系”页面上，按钮是一行而不是一列。我猜这两个问题非常相似，可以用相同的代码解决。

几个月前我开始编写代码，对此我真的很陌生。如果您需要该网站的代码以提供帮助，请告诉我。非常感谢。

Answer 1

您似乎正在尝试使您的网站具有响应性。

在这种情况下，我强烈建议使用响应式 Web 框架，例如 Bootstrap、Foundation、Materialize 等。

开发这些框架是为了让我们作为 Web 开发人员的生活更加轻松。

如果您确实采纳了我的建议并决定选择一个框架，我建议您使用他们的网格系统而不是表格来布局您的产品页面。

如果没有，您可以查看媒体查询here。它的 CSS 代码仅在给定条件下运行（例如：宽度小于 500 像素的屏幕尺寸）。

祝你好运。

Answer 2

首先你可以使用响应式框架

通过在你的文件头中添加这个来包含引导程序。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

然后对于产品将它们添加到此代码中 此块内的每个产品。

<div class="col-md-3 col-sm-4">
    your product code here ... 
</div>

Answer 3

在父元素上使用display:table，在子元素上使用display:table-cell，这将非常容易。

因此，对于 联系页面，您可以在 其他样式下添加此 CSS：

// apply these styles at max-width:666px
// or remove the media queries and keep this code instead of your old code.
// keep in mind that if you use this you may have to adjust a few things
// for it to look as smooth as possible transition-wise.

@media only and screen (max-width:666px) { 
    table {
        display:block;
        margin:0;
        margin-top:15px;
        width:100%;
    }
    tbody {
        width:100%;
        display:table;
    }
    .button2 {
        top:0px;
        margin:0;
    }
    td.row2 {
        padding:0;
        display:table-cell;
    }
}

请记住，您的代码对此效率不高，因此我的代码基于您的代码。基础是在父元素上使用display:table，在子元素上使用display:table-cell。同时保留所有元素width:100%。希望这会有所帮助。

输出图像：

可以小到：