html - 如何使用 div 更改响应表行的高度

标签 html css responsive-design

我正在尝试创建一个响应式表格(一个简单的键盘)，但只有单元格正在调整大小。我希望无需滚动即可在屏幕上显示完整的键盘。

这是我的代码:https://jsfiddle.net/723ar2f5/2/embedded/result/ 

  #teclat {
    display: table;
    table-layout: fixed;
    border-spacing:5px;
    position: absolute;
    height: 100%;
  }
  #lletra {
    font-family: Verdana;
    font-size: 9vw;
  }
  .fila {
    display: table-row;
  }

  .fila div {
    display: table-cell;
  }
  .tecla {
    width: 100%;
    height: 100%;
  }

如果屏幕足够大，看起来还不错，但在移动屏幕上就不行。

最佳答案

沿着这个尝试一些东西。

.tecla {
    width: 100%;
    height: 13vw;
}

完整代码和 DEMO jsfiddle

 function esborra(tot) {
  var text = document.getElementById('text');
  if (tot == "s")
   text.value = "";
  else
   text.value = text.value.slice(0,-1);
 }
 window.onload = function(e){
   setTimeout(window.scrollTo(0,1),10);

   var elements = document.getElementsByClassName('tecla');
   for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', (function(i) {
        return function() {
          document.getElementById('text').value = document.getElementById('text').value + this.getElementById('lletra').textContent;
        };
      })(i), false);
   }
 }
  body {
    height: 100%;
    width: 100%;
  }
  #teclat {
    /* display: table; */
    /* table-layout: fixed; */
    /* border-spacing: 5px; */
    /* position: relative; */
    height: 100vh;
  }
  #lletra {
    font-family: Verdana;
    font-size: 9vw;
  }
  .fila {
    display: table-row;
  }

  .fila div {
    display: table-cell;
  }
.tecla {
    width: 100%;
    height: 13vw;
}
  .tecla_marc {
    fill: red;
    stroke:black;
    stroke-width:5;
    opacity:0.5;
  }
<body>
<input type="text" id="text" style="width: 60%" readonly/><button type="button" onclick="esborra('1')"></button><button type="button" onclick="esborra('s')">Esborra</button><br/>
<div id="teclat">
<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">A</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">B</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">C</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">D</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">E</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">F</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">G</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">H</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">I</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">J</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">K</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">L</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">M</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">N</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">O</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">P</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Q</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">R</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">S</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">T</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">U</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">V</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">W</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">X</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Y</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Z</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">&nbsp;</text>
</svg>
</div>
</div>

关于html - 如何使用 div 更改响应表行的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40619305/

上一篇：css - 如果我必须支持 IE9，是否值得使用 Flexbox？

下一篇：html - 修复字体响应

相关文章：

javascript - JQuery - 在垂直滚动上添加/删除类没有效果

javascript - 如何使用 JavaScript 创建 SVG 动画标签

html - 并排放置两个图像链接

javascript - 响应式菜单问题 - 如何在移动环境中处理 HREF 和 onclick 事件

css - 如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度？

javascript - 在浏览器中使用 JavaScript 删除链接

html - timepicker 值不会在顶部弹出

html - 试图从本地显示图像

html - 将圆形 div 放置在所有设备的容器中心

html - 为什么这些 inline-block div 元素之间存在无法解释的差距？

©2024 IT工具网  联系我们