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（视图高度）是否适合响应式网页设计？
更新：
我想要一个方程式，让我在屏幕上拥有所有的列和行，如果我说有10列，那么它们应该都在屏幕上（注意：需要方程式的原因是因为我希望选择列和行由用户（这是一个不好的方法吗？如果不这样做，我不确定该怎么做）
您可以使用网格进行操作，并为用户输入的列数指定1fr的重复值gridTemplateColumns。只需在CSS中将输入的最小宽度和最小高度设置为1px之类的小值，它将响应。看看这个。您可以更改js代码中的列数和行数并运行它，并查看它是如何自动填充的以及全部适合。我还根据行数对单元格的高度进行了计算数学。在出现滚动条之前，这应该适合相当大且合理数量的输入到任何大小的屏幕。这是玩弄的小提琴：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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句