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

Question

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

在移动版本上（我用iPhone 5查看网站）＆＃39;产品＆＃39;和＆＃39;联系＆＃39;除了我在Chrome上的屏幕分辨率（~2000x1000）之外，其他任何内容都不会很好看。

我想了解如何扩展产品＆＃39;因此它固定在它周围的框中并在不同的分辨率上自行调整（例如，在某些分辨率上只有一行，然后是两行，然后是三行）。然后再次，在＆＃39;联系人＆＃39;在移动页面上，按钮是连续的而不是列。我猜这两个问题非常相似，可以使用相同的代码修复。

几个月前我开始编码，我对此非常陌生。如果您需要网站上的代码来帮助我，请告诉我。非常感谢你。

Answer 1

父元素上的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%。希望这会有所帮助。

输出图片：

哪个可以小到：

Answer 2

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

包含bootstrap，将其添加到文件头部。

myEditText.hasFocus()

然后产品将其添加到此代码中 这个街区内的每个产品。

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

Answer 3

您似乎正在尝试让您的网站响应。

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

这些框架的开发使我们作为Web开发人员的生活变得更加轻松。

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

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

祝你好运。