0

基本上是一个计算器应用程序。终端/文本字段在顶部。它下方的 4x4 网格按钮。一切都应该缩放以填满任何屏幕。我知道这是非常开放式的。你的回答可以笼统。用桌子？分区？什么样的显示器？固定的？我不知道如何最好地处理它。

4

4 回答 4

1

没有最好的解决方案，最简单的是使用tables，最现代的使用display: grid但不适用于所有浏览器，您也可以尝试将您编写的任何内容放在一个固定width和height元素中并使用 css3transform: scale来“适应屏幕”，但是也不适用于所有浏览器，您也可以使用 4 个inline-block元素height: 100%; width: 25%;在 4 个block元素中使用 4 个元素height: 25%，或者使用 16 个inline-block元素和width: 25%; height: 25%，另一种解决方案是可以使用position: fixedorposition: absolute和定义所有 16 个元素，并为每个元素单独width:25%; height:25%定义and。我认为对于所有提到的解决方案，您也不应该忘记设置。toplefthtml, body { margin: 0; padding: 0; height: 100%; }

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

于 2012-10-15T22:54:38.037 回答
1

不要使用表格。

您想研究响应式网页设计。

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;
      }

所以你的输入将在一个十二列中，然后将按钮移动到一个三列网格中

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

于 2012-10-15T22:56:35.013 回答
0

我更喜欢使用 div，但对于这种网格，表格可能会更简单，但为了确保使用 precents 作为宽度和高度的值，您可能会使用 colspan 和 rowspan 以正确的方式适合您的表格单元格

于 2012-10-15T22:54:28.097 回答
0

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

不要使用表格，使用 Divs。

不要使用固定显示或绝对显示。（我想你可以，但为什么呢？）

最后，您正在寻找的答案：响应式设计

于 2012-10-15T23:22:52.467 回答