如何根据屏幕尺寸调整输入大小（由用户在弹出窗口中选择）

Question

const sheets = document.getElementById('sheets');

const siteDocument = document.getElementsByTagName('body')[0];

const amountOfColumns = 2;

const amountOfRows = undefined;

for (var i = 0; i < amountOfColumns; i++) {
  const myNewElement = document.createElement('input');
  myNewElement.width = siteDocument
  sheets.appendChild(myNewElement)
}
for (var x = 0; x < amountOfRows; x++) {

}

#titletext {
  font-size: 5vh;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="popup"></div>
    <h1 id="titletext">Excel Sheets</h1>
    <div id="buttons"></div>
    <div id="sheets"></div>
    <script src="script.js"></script>
  </body>
</html>

我的问题：

我如何获得它，以便创建的元素的宽度取决于您使用的屏幕宽度（用户选择输入行和列的数量），我想让它响应并在如果有一堆输入，我想让它适合屏幕，而无需使用滚动条（因为这很痛苦，我想编写一些真正好的代码...）
（你不必回答这个问题）vh（view-height）是否适合响应式网页设计？

更新：

我想要一个方程式让我在屏幕上显示所有列和行，如果我说 10 列它应该全部显示在屏幕上（注意：需要方程式的原因是因为我想要列和由用户选择的行（这是一个糟糕的方法吗？我不确定如果没有它我会怎么做）

Answer 1

您可以对网格进行一些处理，并为用户为 gridTemplateColumns 输入的列数分配重复值 1fr。只需在 CSS 中设置最小宽度和最小高度，以便将输入设置为 1px 之类的小东西，它就会响应。看看这个。您可以更改 js 代码中的列数和行数，并运行它并查看它如何自动填充以及它是否适合。我还根据行数对单元格的高度进行了一些计算。在滚动条出现之前，这应该适合任何大小的屏幕上相当大且合理的输入量。这是要玩的 fiddle：https://jsfiddle.net/uypm84e7/

const sheets = document.getElementById('sheets');

const siteDocument = document.getElementsByTagName('body')[0];

const amountOfColumns = 5;

const amountOfRows = 20;

for (var x = 0; x < amountOfRows; x++) {
for (var i = 0; i < amountOfColumns; i++) {
  const myNewElement = document.createElement('input');
  myNewElement.width = siteDocument
  sheets.appendChild(myNewElement)
  document.getElementById("sheets").style.gridTemplateColumns = "repeat(" + amountOfColumns +", 1fr)";
}
}
 var inputs = document.getElementsByTagName("input");
 for (var z = 0; z < inputs.length; z++) {
inputs[z].style.height = "calc((50vh/" +amountOfRows +") - 3px)";
//inputs[z].style.maxHeight = "calc((80vh/20) - 100px)";
}

#titletext {
  font-size: 5vh;
}

#sheets {
  display: grid;
}

input {
min-width: 0px;
min-height: 0px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="popup"></div>
    <h1 id="titletext">Excel Sheets</h1>
    <div id="buttons"></div>
    <div id="sheets"></div>
    <script src="script.js"></script>
  </body>
</html>

如何根据屏幕尺寸调整输入大小（由用户在弹出窗口中选择）

How do I resize my inputs depending on the screen size (chosen by the user in the popup)

html

javascript

css

spreadsheet

responsive-design