Question

基本上是一个计算器应用程序。终端/文本字段在顶部。它下方有4x4网格按钮。一切都应该扩展以填充任何屏幕。我知道这是非常开放的结果。你的回答可以很一般。用一张桌子？ div的？什么样的展示？固定？我不知道如何最好地接近它。

Answer 1

没有最好的解决方案，最简单的方法是使用table，最现代的使用display: grid但不适用于所有浏览器，你也可以尝试将你写的任何东西放在一个固定的width和height元素，并使用css3的transform: scale来“适应屏幕”，但这也不适用于所有浏览器，您也可以使用4 inline-block height: 100%; width: 25%;个block个元素中的height: 25%元素，inline-block个width: 25%; height: 25%元素，position: fixed个元素position: absolute，另一个解决方案是width:25%; height:25%定义所有16个元素}或top和left并为每个单独定义html, body { margin: 0; padding: 0; height: 100%; }和{{1}}。我认为对于所有提到的解决方案，您也不应忘记设置{{1}}。

当然，如果您添加边距，您可能需要调整这些百分比，但也要设置百分比，以便在缩放时看起来很好。

Answer 2

不要使用表格。

您希望了解自适应网页设计。

http://www.alistapart.com/articles/responsive-web-design/

我使用网格系统。检查一下，看看你在做什么。您希望您的网格具有灵活性，因此基于百分比，而不是基于像素。这样您就不必依赖媒体查询断点来改变宽度 - 它只会随着视口宽度而弯曲。

例如（

      .onecol    { width: 5.801104972%;  }       
      .twocol    { width: 14.364640883%; }       
      .threecol  { width: 22.928176794%; }       
      .fourcol   { width: 31.491712705%; }       
      .fivecol   { width: 40.055248616%; }      
      .sixcol    { width: 48.618784527%; }       
      .sevencol  { width: 57.182320438000005%; } 
      .eightcol  { width: 65.74585634900001%; }  
      .ninecol   { width: 74.30939226%; }       
      .tencol    { width: 82.87292817100001%; }  
      .elevencol { width: 91.436464082%; }      
      .twelvecol { width: 99.999999993%; }       

      /* layout & column defaults */
      .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
        position: relative;
        float: left;
        margin-left: 2.762430939%;
      }

      .first {
        margin-left: 0;
      }

      .last {
        float: right;
      }

所以你的输入将是12col，然后将按钮移动到threecol网格

也就是说，您会发现对于手机上的纵向模式和向下，您可能需要更改布局，因此使用媒体查询并更改css可能只显示每行两个按钮。

Answer 3

我更喜欢使用div，但是对于这种网格，表格可能更简单，但是肯定使用先例作为宽度和高度的值，你可以使用colspan和rowspan来适应你的表格单元格。正确的方式

Answer 4

如果您将按钮固定为4x4，请使用响应式设计。

请勿使用表格，请使用Div。

请勿使用固定显示屏或绝对显示屏。（我想你可以，但为什么？）

最后，您正在寻找答案：Responsive Design

构建适合所有显示的类似应用的网页的最佳方式

4 个答案: