百分比响应式按钮表

我正在制作一个基于网络的计算器，我使用CSS进行了设计。现在我想让这种响应能够在智能手机上使用。以下是我的HTML的一部分百分比响应式按钮表

<table class="buttonTable"> 

<tbody> 
    <tr> 
     <td> 
      <input class="button_standard" type="button" value="7"></input> 
     </td> 
     <td> 
      <input class="button_standard" type="button" value="8"></input> 
     </td> 
     <td> 
      <input class="button_standard" type="button" value="9"></input> 
     </td> 
     <td> 
      <input class="button_operator" type="button" value="÷"></input> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input class="button_standard" type="button" value="4"></input> 
     </td> 
     <td> 
      <input class="button_standard" type="button" value="5"></input> 
     </td> 
     ... 
    </tr> 
    ... 

</table>

我试图以达到大约450像素的屏幕尺寸和下面是这些按钮变得reponsive，并开始使用百分比（这将是奇怪的使用百分比桌面屏幕尺寸，因为它会创建宽度约500px的按钮）。

这是什么样子的桌面或其他大屏幕画面（周围白色的很多已经被切掉）：

enter image description here

我有我的CSS设置如下（展示只有相关的东西）：

table { 
    text-align: center; 
    margin: 10px auto; 
} 

td { 
    width: 70px; 
    height: 50px; 
    padding: 2px; 
} 

input[type="button"] { 
    width: 100%; 
    height: 100%; 
    ... 
} 

@media (max-width: 450px) { 
    td { 
     width: 25%; 
    } 

    ... 
}

因为我希望按钮是整个屏幕的25％，我将宽度设置为25％。你会期望每个按钮都是25％，因此覆盖了整个屏幕，但边距为2px。这是不是发生了什么：

enter image description here

我缺少什么引起的？我已经尝试使用25％的宽度自己设计按钮（input[type="button"]元素），但那更糟糕。

有趣的是，当屏幕宽度达到如上所示的表宽度时，元素实际上会动态地改变，直到它们达到由文本内部等定义的最小宽度。

我真的不明白这里发生了什么。

来源

2014-10-30 Creator13

设置表格的宽度为100％...或更好，96％，留有一定的利润... – sinisake 2014-10-30 21:54:02

你怎么打算在处理高分辨率手机/平板电脑和/或触摸屏电脑/笔记本电脑？纯粹看纯粹的屏幕分辨率并不是确定这一点的最好方法... – user2366842 2014-10-30 21:55:14

@ user2366842我会在稍后看看，当我已经完成基本设置时 – Creator13 2014-10-31 10:44:13

问题出在table元素。它不知道它有多宽，所以它会尽可能小，然后td s将占表的宽度的25％。

将table的宽度更改为100％，并且您会很好。

来源

2014-10-30 21:55:25

我会将表格更改为父级的全宽以及输入，然后将父级上的最大宽度设置为25em-30em。

这将是这个样子：

table, input { 
    width:100%; 
} 
main { 
    max-width: 27.5em; 
    margin: 0 auto; 
    padding: 0 1em; // for mobile 
}

来源

2014-10-30 22:02:59 GSaunders

最大宽度设置是什么？ – Creator13 2014-11-01 11:17:58

它为页面创建最大宽度。然后，您可以将所有内容都设为100％，但不会超过最大宽度。这就是你如何创建响应式设计。 – GSaunders 2014-11-03 15:41:41

百分比响应式按钮表

回答

相关问题